-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 {registerTableSelectionHandler} from "./ui/framework/helpers/table-selection-handler";
import {el} from "./utils/dom";
import {registerShortcuts} from "./services/shortcuts";
-import {registerNodeResizer} from "./ui/framework/helpers/image-resizer";
+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);
registerRichText(editor),
registerHistory(editor, createEmptyHistoryState(), 300),
registerShortcuts(context),
+ registerKeyboardHandling(context),
registerTableResizer(editor, editWrap),
registerTableSelectionHandler(editor),
registerTaskListHandler(editor, editArea),
registerDropPasteHandling(context),
registerNodeResizer(context),
+ registerAutoLinks(editor),
);
listenToCommonEvents(editor);
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();
};
registerCommonNodeMutationListeners(context);