To align with pre-existing use of alignment classes.
--- /dev/null
+import {LexicalNode, Spread} from "lexical";
+import type {SerializedElementNode} from "lexical/nodes/LexicalElementNode";
+
+export type CommonBlockAlignment = 'left' | 'right' | 'center' | 'justify' | '';
+const validAlignments: CommonBlockAlignment[] = ['left', 'right', 'center', 'justify'];
+
+export type SerializedCommonBlockNode = Spread<{
+ id: string;
+ alignment: CommonBlockAlignment;
+}, SerializedElementNode>
+
+export interface NodeHasAlignment {
+ readonly __alignment: CommonBlockAlignment;
+ setAlignment(alignment: CommonBlockAlignment): void;
+ getAlignment(): CommonBlockAlignment;
+}
+
+export interface NodeHasId {
+ readonly __id: string;
+ setId(id: string): void;
+ getId(): string;
+}
+
+interface CommonBlockInterface extends NodeHasId, NodeHasAlignment {}
+
+export function extractAlignmentFromElement(element: HTMLElement): CommonBlockAlignment {
+ const textAlignStyle: string = element.style.textAlign || '';
+ if (validAlignments.includes(textAlignStyle as CommonBlockAlignment)) {
+ return textAlignStyle as CommonBlockAlignment;
+ }
+
+ if (element.classList.contains('align-left')) {
+ return 'left';
+ } else if (element.classList.contains('align-right')) {
+ return 'right'
+ } else if (element.classList.contains('align-center')) {
+ return 'center'
+ } else if (element.classList.contains('align-justify')) {
+ return 'justify'
+ }
+
+ return '';
+}
+
+export function setCommonBlockPropsFromElement(element: HTMLElement, node: CommonBlockInterface): void {
+ if (element.id) {
+ node.setId(element.id);
+ }
+
+ node.setAlignment(extractAlignmentFromElement(element));
+}
+
+export function commonPropertiesDifferent(nodeA: CommonBlockInterface, nodeB: CommonBlockInterface): boolean {
+ return nodeA.__id !== nodeB.__id ||
+ nodeA.__alignment !== nodeB.__alignment;
+}
+
+export function updateElementWithCommonBlockProps(element: HTMLElement, node: CommonBlockInterface): void {
+ if (node.__id) {
+ element.setAttribute('id', node.__id);
+ }
+
+ if (node.__alignment) {
+ element.classList.add('align-' + node.__alignment);
+ }
+}
\ No newline at end of file
ElementNode,
LexicalEditor,
LexicalNode,
- ParagraphNode, SerializedElementNode, Spread
+ ParagraphNode, Spread
} from 'lexical';
import type {EditorConfig} from "lexical/LexicalEditor";
import type {RangeSelection} from "lexical/LexicalSelection";
-import {el} from "../utils/dom";
+import {
+ CommonBlockAlignment, commonPropertiesDifferent,
+ SerializedCommonBlockNode,
+ setCommonBlockPropsFromElement,
+ updateElementWithCommonBlockProps
+} from "./_common";
export type CalloutCategory = 'info' | 'danger' | 'warning' | 'success';
export type SerializedCalloutNode = Spread<{
category: CalloutCategory;
- id: string;
-}, SerializedElementNode>
+}, SerializedCommonBlockNode>
export class CalloutNode extends ElementNode {
__id: string = '';
__category: CalloutCategory = 'info';
+ __alignment: CommonBlockAlignment = '';
static getType() {
return 'callout';
return self.__id;
}
+ setAlignment(alignment: CommonBlockAlignment) {
+ const self = this.getWritable();
+ self.__alignment = alignment;
+ }
+
+ getAlignment(): CommonBlockAlignment {
+ const self = this.getLatest();
+ return self.__alignment;
+ }
+
createDOM(_config: EditorConfig, _editor: LexicalEditor) {
const element = document.createElement('p');
element.classList.add('callout', this.__category || '');
- if (this.__id) {
- element.setAttribute('id', this.__id);
- }
+ updateElementWithCommonBlockProps(element, this);
return element;
}
- updateDOM(prevNode: unknown, dom: HTMLElement) {
- // Returning false tells Lexical that this node does not need its
- // DOM element replacing with a new copy from createDOM.
- return false;
+ updateDOM(prevNode: CalloutNode): boolean {
+ return prevNode.__category !== this.__category ||
+ commonPropertiesDifferent(prevNode, this);
}
insertNewAfter(selection: RangeSelection, restoreSelection?: boolean): CalloutNode|ParagraphNode {
}
const node = new CalloutNode(category);
- if (element.id) {
- node.setId(element.id);
- }
+ setCommonBlockPropsFromElement(element, node);
return {
node,
version: 1,
category: this.__category,
id: this.__id,
+ alignment: this.__alignment,
};
}
static importJSON(serializedNode: SerializedCalloutNode): CalloutNode {
const node = $createCalloutNode(serializedNode.category);
node.setId(serializedNode.id);
+ node.setAlignment(serializedNode.alignment);
return node;
}
import {
DOMConversionMap,
- DOMConversionOutput, ElementFormatType,
+ DOMConversionOutput,
LexicalNode,
Spread
} from "lexical";
import {EditorConfig} from "lexical/LexicalEditor";
import {HeadingNode, HeadingTagType, SerializedHeadingNode} from "@lexical/rich-text";
+import {
+ CommonBlockAlignment, commonPropertiesDifferent,
+ SerializedCommonBlockNode,
+ setCommonBlockPropsFromElement,
+ updateElementWithCommonBlockProps
+} from "./_common";
-export type SerializedCustomHeadingNode = Spread<{
- id: string;
-}, SerializedHeadingNode>
+export type SerializedCustomHeadingNode = Spread<SerializedCommonBlockNode, SerializedHeadingNode>
export class CustomHeadingNode extends HeadingNode {
__id: string = '';
+ __alignment: CommonBlockAlignment = '';
static getType() {
return 'custom-heading';
return self.__id;
}
+ setAlignment(alignment: CommonBlockAlignment) {
+ const self = this.getWritable();
+ self.__alignment = alignment;
+ }
+
+ getAlignment(): CommonBlockAlignment {
+ const self = this.getLatest();
+ return self.__alignment;
+ }
+
static clone(node: CustomHeadingNode) {
- return new CustomHeadingNode(node.__tag, node.__key);
+ const newNode = new CustomHeadingNode(node.__tag, node.__key);
+ newNode.__alignment = node.__alignment;
+ return newNode;
}
createDOM(config: EditorConfig): HTMLElement {
const dom = super.createDOM(config);
- if (this.__id) {
- dom.setAttribute('id', this.__id);
- }
-
+ updateElementWithCommonBlockProps(dom, this);
return dom;
}
+ updateDOM(prevNode: CustomHeadingNode, dom: HTMLElement): boolean {
+ return super.updateDOM(prevNode, dom)
+ || commonPropertiesDifferent(prevNode, this);
+ }
+
exportJSON(): SerializedCustomHeadingNode {
return {
...super.exportJSON(),
type: 'custom-heading',
version: 1,
id: this.__id,
+ alignment: this.__alignment,
};
}
static importJSON(serializedNode: SerializedCustomHeadingNode): CustomHeadingNode {
const node = $createCustomHeadingNode(serializedNode.tag);
node.setId(serializedNode.id);
+ node.setAlignment(serializedNode.alignment);
return node;
}
nodeName === 'h6'
) {
node = $createCustomHeadingNode(nodeName);
- if (element.style !== null) {
- node.setFormat(element.style.textAlign as ElementFormatType);
- }
- if (element.id) {
- node.setId(element.id);
- }
+ setCommonBlockPropsFromElement(element, node);
}
return {node};
}
import {
DOMConversion,
DOMConversionMap,
- DOMConversionOutput, ElementFormatType,
+ DOMConversionOutput,
LexicalNode,
- ParagraphNode,
- SerializedParagraphNode,
- Spread
+ ParagraphNode, SerializedParagraphNode, Spread,
} from "lexical";
import {EditorConfig} from "lexical/LexicalEditor";
+import {
+ CommonBlockAlignment, commonPropertiesDifferent,
+ SerializedCommonBlockNode,
+ setCommonBlockPropsFromElement,
+ updateElementWithCommonBlockProps
+} from "./_common";
-
-export type SerializedCustomParagraphNode = Spread<{
- id: string;
-}, SerializedParagraphNode>
+export type SerializedCustomParagraphNode = Spread<SerializedCommonBlockNode, SerializedParagraphNode>
export class CustomParagraphNode extends ParagraphNode {
__id: string = '';
+ __alignment: CommonBlockAlignment = '';
static getType() {
return 'custom-paragraph';
return self.__id;
}
+ setAlignment(alignment: CommonBlockAlignment) {
+ const self = this.getWritable();
+ self.__alignment = alignment;
+ }
+
+ getAlignment(): CommonBlockAlignment {
+ const self = this.getLatest();
+ return self.__alignment;
+ }
+
static clone(node: CustomParagraphNode): CustomParagraphNode {
const newNode = new CustomParagraphNode(node.__key);
newNode.__id = node.__id;
+ newNode.__alignment = node.__alignment;
return newNode;
}
createDOM(config: EditorConfig): HTMLElement {
const dom = super.createDOM(config);
- if (this.__id) {
- dom.setAttribute('id', this.__id);
- }
-
+ updateElementWithCommonBlockProps(dom, this);
return dom;
}
+ updateDOM(prevNode: CustomParagraphNode, dom: HTMLElement, config: EditorConfig): boolean {
+ return super.updateDOM(prevNode, dom, config)
+ || commonPropertiesDifferent(prevNode, this);
+ }
+
exportJSON(): SerializedCustomParagraphNode {
return {
...super.exportJSON(),
type: 'custom-paragraph',
version: 1,
id: this.__id,
+ alignment: this.__alignment,
};
}
static importJSON(serializedNode: SerializedCustomParagraphNode): CustomParagraphNode {
const node = $createCustomParagraphNode();
node.setId(serializedNode.id);
+ node.setAlignment(serializedNode.alignment);
return node;
}
return {
conversion: (element: HTMLElement): DOMConversionOutput|null => {
const node = $createCustomParagraphNode();
- if (element.style) {
- node.setFormat(element.style.textAlign as ElementFormatType);
+ if (element.style.textIndent) {
const indent = parseInt(element.style.textIndent, 10) / 20;
if (indent > 0) {
node.setIndent(indent);
}
}
- if (element.id) {
- node.setId(element.id);
- }
+ setCommonBlockPropsFromElement(element, node);
return {node};
},
import {
DOMConversionMap,
- DOMConversionOutput, ElementFormatType,
+ DOMConversionOutput,
LexicalNode,
Spread
} from "lexical";
import {EditorConfig} from "lexical/LexicalEditor";
import {QuoteNode, SerializedQuoteNode} from "@lexical/rich-text";
+import {
+ CommonBlockAlignment, commonPropertiesDifferent,
+ SerializedCommonBlockNode,
+ setCommonBlockPropsFromElement,
+ updateElementWithCommonBlockProps
+} from "./_common";
-export type SerializedCustomQuoteNode = Spread<{
- id: string;
-}, SerializedQuoteNode>
+export type SerializedCustomQuoteNode = Spread<SerializedCommonBlockNode, SerializedQuoteNode>
export class CustomQuoteNode extends QuoteNode {
__id: string = '';
+ __alignment: CommonBlockAlignment = '';
static getType() {
return 'custom-quote';
return self.__id;
}
+ setAlignment(alignment: CommonBlockAlignment) {
+ const self = this.getWritable();
+ self.__alignment = alignment;
+ }
+
+ getAlignment(): CommonBlockAlignment {
+ const self = this.getLatest();
+ return self.__alignment;
+ }
+
static clone(node: CustomQuoteNode) {
const newNode = new CustomQuoteNode(node.__key);
newNode.__id = node.__id;
+ newNode.__alignment = node.__alignment;
return newNode;
}
createDOM(config: EditorConfig): HTMLElement {
const dom = super.createDOM(config);
- if (this.__id) {
- dom.setAttribute('id', this.__id);
- }
-
+ updateElementWithCommonBlockProps(dom, this);
return dom;
}
+ updateDOM(prevNode: CustomQuoteNode): boolean {
+ return commonPropertiesDifferent(prevNode, this);
+ }
+
exportJSON(): SerializedCustomQuoteNode {
return {
...super.exportJSON(),
type: 'custom-quote',
version: 1,
id: this.__id,
+ alignment: this.__alignment,
};
}
static importJSON(serializedNode: SerializedCustomQuoteNode): CustomQuoteNode {
const node = $createCustomQuoteNode();
node.setId(serializedNode.id);
+ node.setAlignment(serializedNode.alignment);
return node;
}
function $convertBlockquoteElement(element: HTMLElement): DOMConversionOutput {
const node = $createCustomQuoteNode();
- if (element.style !== null) {
- node.setFormat(element.style.textAlign as ElementFormatType);
- }
- if (element.id) {
- node.setId(element.id);
- }
+ setCommonBlockPropsFromElement(element, node);
return {node};
}
} from "@lexical/table";
import {TableCellHeaderState} from "@lexical/table/LexicalTableCellNode";
import {extractStyleMapFromElement, StyleMap} from "../utils/dom";
+import {CommonBlockAlignment, extractAlignmentFromElement} from "./_common";
export type SerializedCustomTableCellNode = Spread<{
- styles: Record<string, string>,
+ styles: Record<string, string>;
+ alignment: CommonBlockAlignment;
}, SerializedTableCellNode>
export class CustomTableCellNode extends TableCellNode {
__styles: StyleMap = new Map;
+ __alignment: CommonBlockAlignment = '';
static getType(): string {
return 'custom-table-cell';
);
cellNode.__rowSpan = node.__rowSpan;
cellNode.__styles = new Map(node.__styles);
+ cellNode.__alignment = node.__alignment;
return cellNode;
}
self.__styles = new Map(styles);
}
+ setAlignment(alignment: CommonBlockAlignment) {
+ const self = this.getWritable();
+ self.__alignment = alignment;
+ }
+
+ getAlignment(): CommonBlockAlignment {
+ const self = this.getLatest();
+ return self.__alignment;
+ }
+
updateTag(tag: string): void {
const isHeader = tag.toLowerCase() === 'th';
const state = isHeader ? TableCellHeaderStates.ROW : TableCellHeaderStates.NO_STATUS;
element.style.setProperty(name, value);
}
+ if (this.__alignment) {
+ element.classList.add('align-' + this.__alignment);
+ }
+
return element;
}
updateDOM(prevNode: CustomTableCellNode): boolean {
return super.updateDOM(prevNode)
- || this.__styles !== prevNode.__styles;
+ || this.__styles !== prevNode.__styles
+ || this.__alignment !== prevNode.__alignment;
}
static importDOM(): DOMConversionMap | null {
);
node.setStyles(new Map(Object.entries(serializedNode.styles)));
+ node.setAlignment(serializedNode.alignment);
return node;
}
...super.exportJSON(),
type: 'custom-table-cell',
styles: Object.fromEntries(this.__styles),
+ alignment: this.__alignment,
};
}
}
if (domNode instanceof HTMLElement && output.node instanceof CustomTableCellNode) {
output.node.setStyles(extractStyleMapFromElement(domNode));
+ output.node.setAlignment(extractAlignmentFromElement(domNode));
}
return output;
import {el, extractStyleMapFromElement, StyleMap} from "../utils/dom";
import {getTableColumnWidths} from "../utils/tables";
-
-export type SerializedCustomTableNode = Spread<{
- id: string;
+import {
+ CommonBlockAlignment,
+ SerializedCommonBlockNode,
+ setCommonBlockPropsFromElement,
+ updateElementWithCommonBlockProps
+} from "./_common";
+
+export type SerializedCustomTableNode = Spread<Spread<{
colWidths: string[];
styles: Record<string, string>,
-}, SerializedTableNode>
+}, SerializedTableNode>, SerializedCommonBlockNode>
export class CustomTableNode extends TableNode {
__id: string = '';
__colWidths: string[] = [];
__styles: StyleMap = new Map;
+ __alignment: CommonBlockAlignment = '';
static getType() {
return 'custom-table';
return self.__id;
}
+ setAlignment(alignment: CommonBlockAlignment) {
+ const self = this.getWritable();
+ self.__alignment = alignment;
+ }
+
+ getAlignment(): CommonBlockAlignment {
+ const self = this.getLatest();
+ return self.__alignment;
+ }
+
setColWidths(widths: string[]) {
const self = this.getWritable();
self.__colWidths = widths;
newNode.__id = node.__id;
newNode.__colWidths = node.__colWidths;
newNode.__styles = new Map(node.__styles);
+ newNode.__alignment = node.__alignment;
return newNode;
}
createDOM(config: EditorConfig): HTMLElement {
const dom = super.createDOM(config);
- const id = this.getId();
- if (id) {
- dom.setAttribute('id', id);
- }
+ updateElementWithCommonBlockProps(dom, this);
const colWidths = this.getColWidths();
if (colWidths.length > 0) {
id: this.__id,
colWidths: this.__colWidths,
styles: Object.fromEntries(this.__styles),
+ alignment: this.__alignment,
};
}
node.setId(serializedNode.id);
node.setColWidths(serializedNode.colWidths);
node.setStyles(new Map(Object.entries(serializedNode.styles)));
+ node.setAlignment(serializedNode.alignment);
return node;
}
return {
conversion: (element: HTMLElement): DOMConversionOutput|null => {
const node = $createCustomTableNode();
-
- if (element.id) {
- node.setId(element.id);
- }
+ setCommonBlockPropsFromElement(element, node);
const colWidths = getTableColumnWidths(element as HTMLTableElement);
node.setColWidths(colWidths);
CustomHeadingNode,
CustomQuoteNode,
CustomListNode,
- CustomListItemNode,
+ CustomListItemNode, // TODO - Alignment?
CustomTableNode,
CustomTableRowNode,
CustomTableCellNode,
- ImageNode,
+ ImageNode, // TODO - Alignment
HorizontalRuleNode,
DetailsNode, SummaryNode,
CodeBlockNode,
DiagramNode,
- MediaNode,
- CustomParagraphNode, // TODO - ID
+ MediaNode, // TODO - Alignment
+ CustomParagraphNode,
LinkNode,
{
replace: ParagraphNode,
## Main Todo
-- Alignments: Use existing classes for blocks (including table cells)
+
- Alignments: Handle inline block content (image, video)
- Image paste upload
- Keyboard shortcuts support
-import {$getSelection, BaseSelection, ElementFormatType} from "lexical";
+import {$getSelection, BaseSelection} from "lexical";
import {EditorButtonDefinition} from "../../framework/buttons";
import alignLeftIcon from "@icons/editor/align-left.svg";
import {EditorUiContext} from "../../framework/core";
import alignRightIcon from "@icons/editor/align-right.svg";
import alignJustifyIcon from "@icons/editor/align-justify.svg";
import {$getBlockElementNodesInSelection, $selectionContainsElementFormat} from "../../../utils/selection";
+import {CommonBlockAlignment} from "../../../nodes/_common";
+import {nodeHasAlignment} from "../../../utils/nodes";
-function setAlignmentForSection(alignment: ElementFormatType): void {
+function setAlignmentForSection(alignment: CommonBlockAlignment): void {
const selection = $getSelection();
const elements = $getBlockElementNodesInSelection(selection);
for (const node of elements) {
- node.setFormat(alignment);
+ if (nodeHasAlignment(node)) {
+ node.setAlignment(alignment)
+ }
}
}
import {$createCustomParagraphNode} from "../nodes/custom-paragraph";
import {$generateNodesFromDOM} from "@lexical/html";
import {htmlToDom} from "./dom";
+import {NodeHasAlignment} from "../nodes/_common";
function wrapTextNodes(nodes: LexicalNode[]): LexicalNode[] {
return nodes.map(node => {
}
return null;
+}
+
+export function nodeHasAlignment(node: object): node is NodeHasAlignment {
+ return '__alignment' in node;
}
\ No newline at end of file
margin-left: auto;
margin-right: auto;
}
+ .align-justify {
+ text-align: justify;
+ }
h1, h2, h3, h4, h5, h6, pre {
clear: left;
}
projects / bookstack / commitdiff