Lexical: Added view/edit source code button/form/action

diff --git a/resources/js/wysiwyg/actions.ts b/resources/js/wysiwyg/actions.ts
new file mode 100644 (file)
index 0000000..bca31e5
--- /dev/null
+++ b/resources/js/wysiwyg/actions.ts
@@ -0,0 +1,26 @@
+import {$getRoot, LexicalEditor} from "lexical";
+import {$generateHtmlFromNodes, $generateNodesFromDOM} from "@lexical/html";
+
+
+export function setEditorContentFromHtml(editor: LexicalEditor, html: string) {
+    const parser = new DOMParser();
+    const dom = parser.parseFromString(html, 'text/html');
+
+    editor.update(() => {
+        const nodes = $generateNodesFromDOM(editor, dom);
+        const root = $getRoot();
+        for (const child of root.getChildren()) {
+            child.remove(true);
+        }
+        root.append(...nodes);
+    });
+}
+
+export function getEditorContentAsHtml(editor: LexicalEditor): Promise<string> {
+    return new Promise((resolve, reject) => {
+        editor.getEditorState().read(() => {
+            const html = $generateHtmlFromNodes(editor);
+            resolve(html);
+        });
+    });
+}
\ No newline at end of file

diff --git a/resources/js/wysiwyg/index.ts b/resources/js/wysiwyg/index.ts
index 0dcbf27f5505a5979415b4acae34d2d262e7a682..41207b706f4237e7d4fa907633e492c2b5574f52 100644 (file)
--- a/resources/js/wysiwyg/index.ts
+++ b/resources/js/wysiwyg/index.ts
@@ -1,10 +1,10 @@
-import {$getRoot, createEditor, CreateEditorArgs} from 'lexical';
+import {createEditor, CreateEditorArgs} from 'lexical';

 import {createEmptyHistoryState, registerHistory} from '@lexical/history';
 import {registerRichText} from '@lexical/rich-text';
 import {mergeRegister} from '@lexical/utils';
 import {createEmptyHistoryState, registerHistory} from '@lexical/history';
 import {registerRichText} from '@lexical/rich-text';
 import {mergeRegister} from '@lexical/utils';

-import {$generateNodesFromDOM} from '@lexical/html';

 import {getNodesForPageEditor} from './nodes';
 import {buildEditorUI} from "./ui";
 import {getNodesForPageEditor} from './nodes';
 import {buildEditorUI} from "./ui";

+import {setEditorContentFromHtml} from "./actions";

 
 export function createPageEditorInstance(editArea: HTMLElement) {
     const config: CreateEditorArgs = {
 
 export function createPageEditorInstance(editArea: HTMLElement) {
     const config: CreateEditorArgs = {


@@ -14,8 +14,6 @@ export function createPageEditorInstance(editArea: HTMLElement) {
     };
 
     const startingHtml = editArea.innerHTML;
     };
 
     const startingHtml = editArea.innerHTML;

-    const parser = new DOMParser();
-    const dom = parser.parseFromString(startingHtml, 'text/html');

 
     const editor = createEditor(config);
     editor.setRootElement(editArea);
 
     const editor = createEditor(config);
     editor.setRootElement(editArea);


@@ -25,11 +23,7 @@ export function createPageEditorInstance(editArea: HTMLElement) {
         registerHistory(editor, createEmptyHistoryState(), 300),
     );
 
         registerHistory(editor, createEmptyHistoryState(), 300),
     );
 

-    editor.update(() => {
-        const startingNodes = $generateNodesFromDOM(editor, dom);
-        const root = $getRoot();
-        root.append(...startingNodes);
-    });
+    setEditorContentFromHtml(editor, startingHtml);

 
     const debugView = document.getElementById('lexical-debug');
     editor.registerUpdateListener(({editorState}) => {
 
     const debugView = document.getElementById('lexical-debug');
     editor.registerUpdateListener(({editorState}) => {

diff --git a/resources/js/wysiwyg/ui/defaults/button-definitions.ts b/resources/js/wysiwyg/ui/defaults/button-definitions.ts
index e549e69a2d71fac92d91b9e0581ee7a16571370e..077bcae21f6641bf965c9b93de5a2abe8886ffc3 100644 (file)
--- a/resources/js/wysiwyg/ui/defaults/button-definitions.ts
+++ b/resources/js/wysiwyg/ui/defaults/button-definitions.ts
@@ -28,6 +28,7 @@ import {EditorUiContext} from "../framework/core";
 import {$isImageNode, ImageNode} from "../../nodes/image";
 import {$createDetailsNode, $isDetailsNode} from "../../nodes/details";
 import {$insertNodeToNearestRoot} from "@lexical/utils";
 import {$isImageNode, ImageNode} from "../../nodes/image";
 import {$createDetailsNode, $isDetailsNode} from "../../nodes/details";
 import {$insertNodeToNearestRoot} from "@lexical/utils";

+import {getEditorContentAsHtml} from "../../actions";

 
 export const undo: EditorButtonDefinition = {
     label: 'Undo',
 
 export const undo: EditorButtonDefinition = {
     label: 'Undo',


@@ -230,3 +231,14 @@ export const details: EditorButtonDefinition = {
     }
 }
 
     }
 }
 

+export const source: EditorButtonDefinition = {
+    label: 'Source code',
+    async action(context: EditorUiContext) {
+        const modal = context.manager.createModal('source');
+        const source = await getEditorContentAsHtml(context.editor);
+        modal.show({source});
+    },
+    isActive() {
+        return false;
+    }
+};

diff --git a/resources/js/wysiwyg/ui/defaults/form-definitions.ts b/resources/js/wysiwyg/ui/defaults/form-definitions.ts
index 13e7a9c9fc68125fc914121fc1f3a535871f55f6..04147a4f0577f34767b961a13185755a94903bf3 100644 (file)
--- a/resources/js/wysiwyg/ui/defaults/form-definitions.ts
+++ b/resources/js/wysiwyg/ui/defaults/form-definitions.ts
@@ -3,6 +3,7 @@ import {EditorUiContext} from "../framework/core";
 import {$createLinkNode} from "@lexical/link";
 import {$createTextNode, $getSelection} from "lexical";
 import {$createImageNode} from "../../nodes/image";
 import {$createLinkNode} from "@lexical/link";
 import {$createTextNode, $getSelection} from "lexical";
 import {$createImageNode} from "../../nodes/image";

+import {setEditorContentFromHtml} from "../../actions";

 
 
 export const link: EditorFormDefinition = {
 
 
 export const link: EditorFormDefinition = {


@@ -86,4 +87,19 @@ export const image: EditorFormDefinition = {
             type: 'text',
         },
     ],
             type: 'text',
         },
     ],

+};
+
+export const source: EditorFormDefinition = {
+    submitText: 'Save',
+    action(formData, context: EditorUiContext) {
+        setEditorContentFromHtml(context.editor, formData.get('source')?.toString() || '');
+        return true;
+    },
+    fields: [
+        {
+            label: 'Source',
+            name: 'source',
+            type: 'textarea',
+        },
+    ],

 };
\ No newline at end of file
 };
\ No newline at end of file

diff --git a/resources/js/wysiwyg/ui/framework/forms.ts b/resources/js/wysiwyg/ui/framework/forms.ts
index c6338f7984925e33c55112aa9d62daebd3ae85c2..a7fcb45ba6cf77566ccdbe4b03c34873929a273e 100644 (file)
--- a/resources/js/wysiwyg/ui/framework/forms.ts
+++ b/resources/js/wysiwyg/ui/framework/forms.ts
@@ -5,7 +5,7 @@ import {el} from "../../helpers";
 export interface EditorFormFieldDefinition {
     label: string;
     name: string;
 export interface EditorFormFieldDefinition {
     label: string;
     name: string;

-    type: 'text' | 'select';
+    type: 'text' | 'select' | 'textarea';

 }
 
 export interface EditorSelectFormFieldDefinition extends EditorFormFieldDefinition {
 }
 
 export interface EditorSelectFormFieldDefinition extends EditorFormFieldDefinition {


@@ -28,7 +28,7 @@ export class EditorFormField extends EditorUiElement {
     }
 
     setValue(value: string) {
     }
 
     setValue(value: string) {

-        const input = this.getDOMElement().querySelector('input,select') as HTMLInputElement;
+        const input = this.getDOMElement().querySelector('input,select,textarea') as HTMLInputElement;

         input.value = value;
     }
 
         input.value = value;
     }
 


@@ -45,6 +45,8 @@ export class EditorFormField extends EditorUiElement {
             const labels = Object.keys(options);
             const optionElems = labels.map(label => el('option', {value: options[label]}, [label]));
             input = el('select', {id, name: this.definition.name, class: 'editor-form-field-input'}, optionElems);
             const labels = Object.keys(options);
             const optionElems = labels.map(label => el('option', {value: options[label]}, [label]));
             input = el('select', {id, name: this.definition.name, class: 'editor-form-field-input'}, optionElems);

+        } else if (this.definition.type === 'textarea') {
+            input = el('textarea', {id, name: this.definition.name, class: 'editor-form-field-input'});

         } else {
             input = el('input', {id, name: this.definition.name, class: 'editor-form-field-input'});
         }
         } else {
             input = el('input', {id, name: this.definition.name, class: 'editor-form-field-input'});
         }

diff --git a/resources/js/wysiwyg/ui/index.ts b/resources/js/wysiwyg/ui/index.ts
index 8227dec6838f4cb23077db9c307ccd41a55d02f2..b2fd7e05a1391d435c4d85c35b5e11b2128167fc 100644 (file)
--- a/resources/js/wysiwyg/ui/index.ts
+++ b/resources/js/wysiwyg/ui/index.ts
@@ -6,7 +6,7 @@ import {
 } from "lexical";
 import {getMainEditorFullToolbar} from "./toolbars";
 import {EditorUIManager} from "./framework/manager";
 } from "lexical";
 import {getMainEditorFullToolbar} from "./toolbars";
 import {EditorUIManager} from "./framework/manager";

-import {image as imageFormDefinition, link as linkFormDefinition} from "./defaults/form-definitions";
+import {image as imageFormDefinition, link as linkFormDefinition, source as sourceFormDefinition} from "./defaults/form-definitions";

 import {DecoratorListener} from "lexical/LexicalEditor";
 import type {NodeKey} from "lexical/LexicalNode";
 import {EditorDecoratorAdapter} from "./framework/decorator";
 import {DecoratorListener} from "lexical/LexicalEditor";
 import type {NodeKey} from "lexical/LexicalNode";
 import {EditorDecoratorAdapter} from "./framework/decorator";


@@ -36,7 +36,11 @@ export function buildEditorUI(element: HTMLElement, editor: LexicalEditor) {
     manager.registerModal('image', {
         title: 'Insert/Edit Image',
         form: imageFormDefinition
     manager.registerModal('image', {
         title: 'Insert/Edit Image',
         form: imageFormDefinition

-    })
+    });
+    manager.registerModal('source', {
+        title: 'Source code',
+        form: sourceFormDefinition,
+    });

 
     // Register decorator listener
     // Maybe move to manager?
 
     // Register decorator listener
     // Maybe move to manager?

diff --git a/resources/js/wysiwyg/ui/toolbars.ts b/resources/js/wysiwyg/ui/toolbars.ts
index b5d151fc11676f97905ddb709c44a2ffd4aec913..63ff8a05397cbedb0a5c42c6ced2beb0b8a8ae76 100644 (file)
--- a/resources/js/wysiwyg/ui/toolbars.ts
+++ b/resources/js/wysiwyg/ui/toolbars.ts
@@ -4,7 +4,7 @@ import {
     dangerCallout, details,
     h2, h3, h4, h5, image,
     infoCallout, italic, link, paragraph,
     dangerCallout, details,
     h2, h3, h4, h5, image,
     infoCallout, italic, link, paragraph,

-    redo, strikethrough, subscript,
+    redo, source, strikethrough, subscript,

     successCallout, superscript, underline,
     undo,
     warningCallout
     successCallout, superscript, underline,
     undo,
     warningCallout


@@ -42,5 +42,7 @@ export function getMainEditorFullToolbar(): EditorContainerUiElement {
         new EditorButton(link),
         new EditorButton(image),
         new EditorButton(details),
         new EditorButton(link),
         new EditorButton(image),
         new EditorButton(details),

+
+        new EditorButton(source),

     ]);
 }
\ No newline at end of file
     ]);
 }
\ No newline at end of file