-import {createEditor, CreateEditorArgs, LexicalEditor} from 'lexical';
+import {$getSelection, createEditor, CreateEditorArgs, LexicalEditor} from 'lexical';
import {createEmptyHistoryState, registerHistory} from '@lexical/history';
import {registerRichText} from '@lexical/rich-text';
import {mergeRegister} from '@lexical/utils';
import {registerTableResizer} from "./ui/framework/helpers/table-resizer";
import {EditorUiContext} from "./ui/framework/core";
import {listen as listenToCommonEvents} from "./services/common-events";
-import {handleDropEvents} from "./services/drop-handling";
+import {registerDropPasteHandling} from "./services/drop-paste-handling";
import {registerTaskListHandler} from "./ui/framework/helpers/task-list-handler";
import {registerTableSelectionHandler} from "./ui/framework/helpers/table-selection-handler";
import {el} from "./utils/dom";
import {registerShortcuts} from "./services/shortcuts";
+import {registerNodeResizer} from "./ui/framework/helpers/node-resizer";
+import {registerKeyboardHandling} from "./services/keyboard-handling";
+import {registerAutoLinks} from "./services/auto-links";
export function createPageEditorInstance(container: HTMLElement, htmlContent: string, options: Record<string, any> = {}): SimpleWysiwygEditorInterface {
const config: CreateEditorArgs = {
const editWrap = el('div', {
class: 'editor-content-wrap',
}, [editArea]);
+
container.append(editWrap);
container.classList.add('editor-container');
+ container.setAttribute('dir', options.textDirection);
+ if (options.darkMode) {
+ container.classList.add('editor-dark');
+ }
const editor = createEditor(config);
editor.setRootElement(editArea);
+ const context: EditorUiContext = buildEditorUI(container, editArea, editWrap, editor, options);
mergeRegister(
registerRichText(editor),
registerHistory(editor, createEmptyHistoryState(), 300),
- registerShortcuts(editor),
+ registerShortcuts(context),
+ registerKeyboardHandling(context),
registerTableResizer(editor, editWrap),
registerTableSelectionHandler(editor),
registerTaskListHandler(editor, editArea),
+ registerDropPasteHandling(context),
+ registerNodeResizer(context),
+ registerAutoLinks(editor),
);
listenToCommonEvents(editor);
- handleDropEvents(editor);
setEditorContentFromHtml(editor, htmlContent);
const debugView = document.getElementById('lexical-debug');
if (debugView) {
debugView.hidden = true;
- }
-
- let changeFromLoading = true;
- editor.registerUpdateListener(({editorState, dirtyElements, dirtyLeaves}) => {
-
- // Emit change event to component system (for draft detection) on actual user content change
- if (dirtyElements.size > 0 || dirtyLeaves.size > 0) {
- if (changeFromLoading) {
- changeFromLoading = false;
- } else {
- window.$events.emit('editor-html-change', '');
- }
- }
-
- // Debug logic
- // console.log('editorState', editorState.toJSON());
- if (debugView) {
+ editor.registerUpdateListener(({dirtyElements, dirtyLeaves, editorState, prevEditorState}) => {
+ // Debug logic
+ // console.log('editorState', editorState.toJSON());
debugView.textContent = JSON.stringify(editorState.toJSON(), null, 2);
- }
- });
+ });
+ }
// @ts-ignore
window.debugEditorState = () => {
- console.log(editor.getEditorState().toJSON());
+ return editor.getEditorState().toJSON();
};
- const context: EditorUiContext = buildEditorUI(container, editArea, editWrap, editor, options);
registerCommonNodeMutationListeners(context);
return new SimpleWysiwygEditorInterface(editor);