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: Started media node support

Browse Source
This commit is contained in:
Dan Brown
2024-07-25 16:25:08 +01:00
parent 76b0d2d5d8
commit f284d31861
8 changed files with 320 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
resources/js/wysiwyg/ui/defaults/buttons/objects.ts
View File

@ -23,7 +23,9 @@ import editIcon from "@icons/edit.svg";
import diagramIcon from "@icons/editor/diagram.svg";
import {$createDiagramNode, $isDiagramNode, $openDrawingEditorForNode, DiagramNode} from "../../../nodes/diagram";
import detailsIcon from "@icons/editor/details.svg";
import mediaIcon from "@icons/editor/media.svg";
import {$createDetailsNode, $isDetailsNode} from "../../../nodes/details";
import {$isMediaNode, MediaNode} from "../../../nodes/media";
export const link: EditorButtonDefinition = {
label: 'Insert/edit link',
@ -32,7 +34,7 @@ export const link: EditorButtonDefinition = {
const linkModal = context.manager.createModal('link');
context.editor.getEditorState().read(() => {
const selection = $getSelection();
const selectedLink = $getNodeFromSelection(selection, $isLinkNode) as LinkNode|null;
const selectedLink = $getNodeFromSelection(selection, $isLinkNode) as LinkNode | null;
let formDefaults = {};
if (selectedLink) {
@ -53,7 +55,7 @@ export const link: EditorButtonDefinition = {
linkModal.show(formDefaults);
});
},
isActive(selection: BaseSelection|null): boolean {
isActive(selection: BaseSelection | null): boolean {
return $selectionContainsNodeType(selection, $isLinkNode);
}
};
@ -64,7 +66,7 @@ export const unlink: EditorButtonDefinition = {
action(context: EditorUiContext) {
context.editor.update(() => {
const selection = context.lastSelection;
const selectedLink = $getNodeFromSelection(selection, $isLinkNode) as LinkNode|null;
const selectedLink = $getNodeFromSelection(selection, $isLinkNode) as LinkNode | null;
const selectionPoints = selection?.getStartEndPoints();
if (selectedLink) {
@ -78,20 +80,19 @@ export const unlink: EditorButtonDefinition = {
}
});
},
isActive(selection: BaseSelection|null): boolean {
isActive(selection: BaseSelection | null): boolean {
return false;
}
};
export const image: EditorButtonDefinition = {
label: 'Insert/Edit Image',
icon: imageIcon,
action(context: EditorUiContext) {
const imageModal = context.manager.createModal('image');
const selection = context.lastSelection;
const selectedImage = $getNodeFromSelection(selection, $isImageNode) as ImageNode|null;
const selectedImage = $getNodeFromSelection(selection, $isImageNode) as ImageNode | null;
context.editor.getEditorState().read(() => {
let formDefaults = {};
@ -113,7 +114,7 @@ export const image: EditorButtonDefinition = {
imageModal.show(formDefaults);
});
},
isActive(selection: BaseSelection|null): boolean {
isActive(selection: BaseSelection | null): boolean {
return $selectionContainsNodeType(selection, $isImageNode);
}
};
@ -126,7 +127,7 @@ export const horizontalRule: EditorButtonDefinition = {
$insertNewBlockNodeAtSelection($createHorizontalRuleNode(), false);
});
},
isActive(selection: BaseSelection|null): boolean {
isActive(selection: BaseSelection | null): boolean {
return $selectionContainsNodeType(selection, $isHorizontalRuleNode);
}
};
@ -137,7 +138,7 @@ export const codeBlock: EditorButtonDefinition = {
action(context: EditorUiContext) {
context.editor.getEditorState().read(() => {
const selection = $getSelection();
const codeBlock = $getNodeFromSelection(context.lastSelection, $isCodeBlockNode) as (CodeBlockNode|null);
const codeBlock = $getNodeFromSelection(context.lastSelection, $isCodeBlockNode) as (CodeBlockNode | null);
if (codeBlock === null) {
context.editor.update(() => {
const codeBlock = $createCodeBlockNode();
@ -151,7 +152,7 @@ export const codeBlock: EditorButtonDefinition = {
}
});
},
isActive(selection: BaseSelection|null): boolean {
isActive(selection: BaseSelection | null): boolean {
return $selectionContainsNodeType(selection, $isCodeBlockNode);
}
};
@ -167,7 +168,7 @@ export const diagram: EditorButtonDefinition = {
action(context: EditorUiContext) {
context.editor.getEditorState().read(() => {
const selection = $getSelection();
const diagramNode = $getNodeFromSelection(context.lastSelection, $isDiagramNode) as (DiagramNode|null);
const diagramNode = $getNodeFromSelection(context.lastSelection, $isDiagramNode) as (DiagramNode | null);
if (diagramNode === null) {
context.editor.update(() => {
const diagram = $createDiagramNode();
@ -180,11 +181,39 @@ export const diagram: EditorButtonDefinition = {
}
});
},
isActive(selection: BaseSelection|null): boolean {
isActive(selection: BaseSelection | null): boolean {
return $selectionContainsNodeType(selection, $isDiagramNode);
}
};
export const media: EditorButtonDefinition = {
label: 'Insert/edit Media',
icon: mediaIcon,
action(context: EditorUiContext) {
const mediaModal = context.manager.createModal('media');
context.editor.getEditorState().read(() => {
const selection = $getSelection();
const selectedNode = $getNodeFromSelection(selection, $isMediaNode) as MediaNode | null;
let formDefaults = {};
if (selectedNode) {
const nodeAttrs = selectedNode.getAttributes();
formDefaults = {
src: nodeAttrs.src || nodeAttrs.data || '',
width: nodeAttrs.width,
height: nodeAttrs.height,
embed: '',
}
}
mediaModal.show(formDefaults);
});
},
isActive(selection: BaseSelection | null): boolean {
return $selectionContainsNodeType(selection, $isMediaNode);
}
};
export const details: EditorButtonDefinition = {
label: 'Insert collapsible block',
@ -209,7 +238,7 @@ export const details: EditorButtonDefinition = {
}
});
},
isActive(selection: BaseSelection|null): boolean {
isActive(selection: BaseSelection | null): boolean {
return $selectionContainsNodeType(selection, $isDetailsNode);
}
}

50
resources/js/wysiwyg/ui/defaults/form-definitions.ts
View File

@ -4,6 +4,7 @@ import {$createLinkNode} from "@lexical/link";
import {$createTextNode, $getSelection} from "lexical";
import {$createImageNode} from "../../nodes/image";
import {setEditorContentFromHtml} from "../../actions";
import {$createMediaNodeFromHtml} from "../../nodes/media";
export const link: EditorFormDefinition = {
@ -89,6 +90,55 @@ export const image: EditorFormDefinition = {
],
};
export const media: EditorFormDefinition = {
submitText: 'Save',
action(formData, context: EditorUiContext) {
// TODO - Get media from selection
const embedCode = (formData.get('embed') || '').toString().trim();
if (embedCode) {
context.editor.update(() => {
const node = $createMediaNodeFromHtml(embedCode);
// TODO - Replace existing or insert new
});
return true;
}
const src = (formData.get('src') || '').toString().trim();
const height = (formData.get('height') || '').toString().trim();
const width = (formData.get('width') || '').toString().trim();
// TODO - Update existing or insert new
return true;
},
fields: [
{
label: 'Source',
name: 'src',
type: 'text',
},
{
label: 'Width',
name: 'width',
type: 'text',
},
{
label: 'Height',
name: 'height',
type: 'text',
},
// TODO - Tabbed interface to separate this option
{
label: 'Paste your embed code below:',
name: 'embed',
type: 'textarea',
},
],
};
export const source: EditorFormDefinition = {
submitText: 'Save',
action(formData, context: EditorUiContext) {

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

@ -6,7 +6,7 @@ import {
getMainEditorFullToolbar, getTableToolbarContent
} from "./toolbars";
import {EditorUIManager} from "./framework/manager";
import {image as imageFormDefinition, link as linkFormDefinition, source as sourceFormDefinition} from "./defaults/form-definitions";
import {image as imageFormDefinition, link as linkFormDefinition, media as mediaFormDefinition, source as sourceFormDefinition} from "./defaults/form-definitions";
import {ImageDecorator} from "./decorators/image";
import {EditorUiContext} from "./framework/core";
import {CodeBlockDecorator} from "./decorators/code-block";
@ -38,6 +38,10 @@ export function buildEditorUI(container: HTMLElement, element: HTMLElement, scro
title: 'Insert/Edit Image',
form: imageFormDefinition
});
manager.registerModal('media', {
title: 'Insert/Edit Media',
form: mediaFormDefinition,
});
manager.registerModal('source', {
title: 'Source code',
form: sourceFormDefinition,

5
resources/js/wysiwyg/ui/toolbars.ts
View File

@ -47,7 +47,7 @@ import {
editCodeBlock,
horizontalRule,
image,
link,
link, media,
unlink
} from "./defaults/buttons/objects";
@ -110,7 +110,7 @@ export function getMainEditorFullToolbar(): EditorContainerUiElement {
]),
// Insert types
new EditorOverflowContainer(6, [
new EditorOverflowContainer(8, [
new EditorButton(link),
new EditorDropdownButton(table, false, [
new EditorTableCreator(),
@ -119,6 +119,7 @@ export function getMainEditorFullToolbar(): EditorContainerUiElement {
new EditorButton(horizontalRule),
new EditorButton(codeBlock),
new EditorButton(diagram),
new EditorButton(media),
new EditorButton(details),
]),