github-mirror/BookStack
2
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-06-06 10:44:33 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

Lexical: Started loading real content, Improved html loading

Browse Source 
Added more styling/layout for buttons and main content area
This commit is contained in:
Dan Brown
2024-07-01 15:10:22 +01:00
parent c2ecbf071f
commit 9ebbf7ce94
6 changed files with 45 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
resources/js/components/wysiwyg-editor.js
View File

@ -5,10 +5,10 @@ export class WysiwygEditor extends Component {
setup() {
this.elem = this.$el;
this.editContainer = this.$refs.editContainer;
this.editContent = this.$refs.editContent;
this.input = this.$refs.input;
window.importVersioned('wysiwyg').then(wysiwyg => {
const editorContent = this.editContent.textContent;
const editorContent = this.input.value;
wysiwyg.createPageEditorInstance(this.editContainer, editorContent);
});
}

19
resources/js/wysiwyg/actions.ts
View File

@ -1,17 +1,32 @@
import {$getRoot, LexicalEditor} from "lexical";
import {$createParagraphNode, $getRoot, $isTextNode, LexicalEditor} from "lexical";
import {$generateHtmlFromNodes, $generateNodesFromDOM} from "@lexical/html";
import {$createCustomParagraphNode} from "./nodes/custom-paragraph";
export function setEditorContentFromHtml(editor: LexicalEditor, html: string) {
const parser = new DOMParser();
const dom = parser.parseFromString(html, 'text/html');
console.log(html);
editor.update(() => {
const nodes = $generateNodesFromDOM(editor, dom);
// Empty existing
const root = $getRoot();
for (const child of root.getChildren()) {
child.remove(true);
}
const nodes = $generateNodesFromDOM(editor, dom);
// Wrap top-level text nodes
for (let i = 0; i < nodes.length; i++) {
const node = nodes[i];
if ($isTextNode(node)) {
const paragraph = $createCustomParagraphNode();
paragraph.append(node);
nodes[i] = paragraph;
}
}
root.append(...nodes);
});
}

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

@ -29,8 +29,12 @@ export function createPageEditorInstance(container: HTMLElement, htmlContent: st
const editArea = el('div', {
contenteditable: 'true',
class: 'editor-content-area page-content',
});
container.append(editArea);
const editWrap = el('div', {
class: 'editor-content-wrap',
}, [editArea]);
container.append(editWrap);
container.classList.add('editor-container');
const editor = createEditor(config);

2
resources/js/wysiwyg/ui/framework/buttons.ts
View File

@ -51,7 +51,7 @@ export class EditorButton extends EditorUiElement {
const label = this.getLabel();
let child: string|HTMLElement = label;
if (this.definition.icon) {
child = el('span', {class: 'editor-button-icon'});
child = el('div', {class: 'editor-button-icon'});
child.innerHTML = this.definition.icon;
}