-import {$getSelection, createEditor, CreateEditorArgs, isCurrentlyReadOnlyMode, 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 {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);
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(({dirtyElements, dirtyLeaves, editorState, prevEditorState}) => {
- // Watch for selection changes to update the UI on change
- // Used to be done via SELECTION_CHANGE_COMMAND but this would not always emit
- // for all selection changes, so this proved more reliable.
- const selectionChange = !(prevEditorState._selection?.is(editorState._selection) || false);
- if (selectionChange) {
- editor.update(() => {
- const selection = $getSelection();
- context.manager.triggerStateUpdate({
- editor, selection,
- });
- });
- }
-
- // 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);