webapp/bookstack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-07-31 15:24:31 +03:00
Code Activity

Lexical: Added tracked container, added fullscreen action

Browse Source 
Changed how the editor is loaded in, so it now creates its own DOM, and
content is passed via creation function, to be better self-contained.
This commit is contained in:
Dan Brown
2024-07-01 10:44:23 +01:00
parent b1c489090e
commit c2ecbf071f
11 changed files with 108 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
resources/js/wysiwyg/index.ts
View File

@ -6,8 +6,9 @@ import {getNodesForPageEditor} from './nodes';
import {buildEditorUI} from "./ui";
import {setEditorContentFromHtml} from "./actions";
import {registerTableResizer} from "./ui/framework/helpers/table-resizer";
import {el} from "./helpers";
export function createPageEditorInstance(editArea: HTMLElement) {
export function createPageEditorInstance(container: HTMLElement, htmlContent: string) {
const config: CreateEditorArgs = {
namespace: 'BookStackPageEditor',
nodes: getNodesForPageEditor(),
@ -26,7 +27,11 @@ export function createPageEditorInstance(editArea: HTMLElement) {
}
};
const startingHtml = editArea.innerHTML;
const editArea = el('div', {
contenteditable: 'true',
});
container.append(editArea);
container.classList.add('editor-container');
const editor = createEditor(config);
editor.setRootElement(editArea);
@ -37,7 +42,7 @@ export function createPageEditorInstance(editArea: HTMLElement) {
registerTableResizer(editor, editArea),
);
setEditorContentFromHtml(editor, startingHtml);
setEditorContentFromHtml(editor, htmlContent);
const debugView = document.getElementById('lexical-debug');
editor.registerUpdateListener(({editorState}) => {
@ -47,24 +52,5 @@ export function createPageEditorInstance(editArea: HTMLElement) {
}
});
buildEditorUI(editArea, editor);
// Example of creating, registering and using a custom command
// const SET_BLOCK_CALLOUT_COMMAND = createCommand();
// editor.registerCommand(SET_BLOCK_CALLOUT_COMMAND, (category: CalloutCategory = 'info') => {
// const selection = $getSelection();
// const blockElement = $getNearestBlockElementAncestorOrThrow(selection.getNodes()[0]);
// if ($isCalloutNode(blockElement)) {
// $setBlocksType(selection, $createParagraphNode);
// } else {
// $setBlocksType(selection, () => $createCalloutNode(category));
// }
// return true;
// }, COMMAND_PRIORITY_LOW);
//
// const button = document.getElementById('lexical-button');
// button.addEventListener('click', event => {
// editor.dispatchCommand(SET_BLOCK_CALLOUT_COMMAND, 'info');
// });
buildEditorUI(container, editArea, editor);
}