webapp/bookstack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2026-01-03 23:42:28 +03:00
Code Activity

Lexical: Started UI fundementals with basic button

Browse Source
This commit is contained in:
Dan Brown
2024-05-28 18:04:48 +01:00
parent 0f8bd869d8
commit b24d60e98d
8 changed files with 288 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,18 +1,10 @@
import {
$createParagraphNode,
$getRoot,
$getSelection,
COMMAND_PRIORITY_LOW,
createCommand,
createEditor, CreateEditorArgs,
} from 'lexical';
import {$getRoot, createEditor, CreateEditorArgs} from 'lexical';
import {createEmptyHistoryState, registerHistory} from '@lexical/history';
import {registerRichText} from '@lexical/rich-text';
import {$getNearestBlockElementAncestorOrThrow, mergeRegister} from '@lexical/utils';
import {mergeRegister} from '@lexical/utils';
import {$generateNodesFromDOM} from '@lexical/html';
import {$setBlocksType} from '@lexical/selection';
import {getNodesForPageEditor} from './nodes';
import {$createCalloutNode, $isCalloutNode, CalloutCategory} from './nodes/callout';
import {buildEditorUI} from "./ui";
export function createPageEditorInstance(editArea: HTMLElement) {
const config: CreateEditorArgs = {
@@ -42,25 +34,29 @@ export function createPageEditorInstance(editArea: HTMLElement) {
const debugView = document.getElementById('lexical-debug');
editor.registerUpdateListener(({editorState}) => {
console.log('editorState', editorState.toJSON());
debugView.textContent = JSON.stringify(editorState.toJSON(), null, 2);
if (debugView) {
debugView.textContent = JSON.stringify(editorState.toJSON(), null, 2);
}
});
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');
});
// 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');
// });
}