diff --git a/packages/outline-extensions/HeaderNode.js b/packages/outline-extensions/HeaderNode.js deleted file mode 100644 index 3dca08e64b3..00000000000 --- a/packages/outline-extensions/HeaderNode.js +++ /dev/null @@ -1,3 +0,0 @@ -'use strict'; - -module.exports = require('./dist/OutlineHeaderNode'); diff --git a/packages/outline-extensions/HeadingNode.js b/packages/outline-extensions/HeadingNode.js new file mode 100644 index 00000000000..ed878c72697 --- /dev/null +++ b/packages/outline-extensions/HeadingNode.js @@ -0,0 +1,3 @@ +'use strict'; + +module.exports = require('./dist/OutlineHeadingNode'); diff --git a/packages/outline-extensions/src/OutlineHeaderNode.js b/packages/outline-extensions/src/OutlineHeaderNode.js deleted file mode 100644 index 3e6e1e67c45..00000000000 --- a/packages/outline-extensions/src/OutlineHeaderNode.js +++ /dev/null @@ -1,46 +0,0 @@ -// @flow strict - -import type {NodeKey} from 'outline'; - -import {BlockNode} from 'outline'; - -type HeaderTagType = 'h1' | 'h2' | 'h3' | 'h4' | 'h5'; - -export class HeaderNode extends BlockNode { - _type: 'header'; - _tag: HeaderTagType; - - constructor(tag: HeaderTagType, key?: NodeKey) { - super(key); - this._tag = tag; - this.type = 'header'; - } - static parse( - // $FlowFixMe: TODO: refine - data: Object, - ): HeaderNode { - const header = new HeaderNode(data._tag); - header.flags = data.flags; - return header; - } - clone(): HeaderNode { - const clone = new HeaderNode(this._tag, this.key); - clone.children = [...this.children]; - clone.parent = this.parent; - clone.flags = this.flags; - return clone; - } - - // View - - createDOM(): HTMLElement { - return document.createElement(this._tag); - } - updateDOM(prevNode: HeaderNode, dom: HTMLElement): boolean { - return false; - } -} - -export function createHeaderNode(headerTag: HeaderTagType): HeaderNode { - return new HeaderNode(headerTag); -} diff --git a/packages/outline-extensions/src/OutlineHeadingNode.js b/packages/outline-extensions/src/OutlineHeadingNode.js new file mode 100644 index 00000000000..64581c768c7 --- /dev/null +++ b/packages/outline-extensions/src/OutlineHeadingNode.js @@ -0,0 +1,46 @@ +// @flow strict + +import type {NodeKey} from 'outline'; + +import {BlockNode} from 'outline'; + +type HeadingTagType = 'h1' | 'h2' | 'h3' | 'h4' | 'h5'; + +export class HeadingNode extends BlockNode { + _type: 'heading'; + _tag: HeadingTagType; + + constructor(tag: HeadingTagType, key?: NodeKey) { + super(key); + this._tag = tag; + this.type = 'heading'; + } + static parse( + // $FlowFixMe: TODO: refine + data: Object, + ): HeadingNode { + const header = new HeadingNode(data._tag); + header.flags = data.flags; + return header; + } + clone(): HeadingNode { + const clone = new HeadingNode(this._tag, this.key); + clone.children = [...this.children]; + clone.parent = this.parent; + clone.flags = this.flags; + return clone; + } + + // View + + createDOM(): HTMLElement { + return document.createElement(this._tag); + } + updateDOM(prevNode: HeadingNode, dom: HTMLElement): boolean { + return false; + } +} + +export function createHeadingNode(headingTag: HeadingTagType): HeadingNode { + return new HeadingNode(headingTag); +} diff --git a/packages/outline-react/src/useOutlineAutoFormatter.js b/packages/outline-react/src/useOutlineAutoFormatter.js index 8ad440e1164..b5cf3c8d7e1 100644 --- a/packages/outline-react/src/useOutlineAutoFormatter.js +++ b/packages/outline-react/src/useOutlineAutoFormatter.js @@ -5,7 +5,7 @@ import type {TextNode} from 'outline'; import {useEffect} from 'react'; import {createListItemNode, ParagraphNode} from 'outline'; -import {createHeaderNode} from 'outline-extensions/HeaderNode'; +import {createHeadingNode} from 'outline-extensions/HeadingNode'; import {createListNode} from 'outline-extensions/ListNode'; import {createQuoteNode} from 'outline-extensions/QuoteNode'; @@ -25,10 +25,10 @@ function textNodeTransform(node: TextNode, view: View): void { if (textContent.length > 1 && secondChar === ' ') { if (firstChar === '#') { node.spliceText(0, 2, '', true); - const header = createHeaderNode('h1'); + const heading = createHeadingNode('h1'); const children = block.getChildren(); - children.forEach((child) => header.append(child)); - block.replace(header); + children.forEach((child) => heading.append(child)); + block.replace(heading); } else if (firstChar === '>') { node.spliceText(0, 2, '', true); const quote = createQuoteNode(); @@ -47,10 +47,10 @@ function textNodeTransform(node: TextNode, view: View): void { } else if (textContent.length > 2 && thirdChar === ' ') { if (firstChar === '#' && secondChar === '#') { node.spliceText(0, 2, '', true); - const header = createHeaderNode('h2'); + const heading = createHeadingNode('h2'); const children = block.getChildren(); - children.forEach((child) => header.append(child)); - block.replace(header); + children.forEach((child) => heading.append(child)); + block.replace(heading); } else if (firstChar === '1' && secondChar === '.') { node.spliceText(0, 2, '', true); const list = createListNode('ol'); diff --git a/packages/outline-react/src/useOutlineRichText.js b/packages/outline-react/src/useOutlineRichText.js index c947d72a9b0..ec179d35691 100644 --- a/packages/outline-react/src/useOutlineRichText.js +++ b/packages/outline-react/src/useOutlineRichText.js @@ -5,7 +5,7 @@ import type {OutlineEditor, Selection} from 'outline'; import {useEffect, useRef} from 'react'; import useOutlineInputEvents from 'outline-react/useOutlineInputEvents'; import useOutlineFocusIn from 'outline-react/useOutlineFocusIn'; -import {HeaderNode} from 'outline-extensions/HeaderNode'; +import {HeadingNode} from 'outline-extensions/HeadingNode'; import {ListNode} from 'outline-extensions/ListNode'; import {QuoteNode} from 'outline-extensions/QuoteNode'; @@ -36,12 +36,12 @@ export default function useOutlineRichText( useEffect(() => { if (editor !== null) { - const removeHeaderType = editor.addNodeType('header', HeaderNode); + const removeHeadingType = editor.addNodeType('heading', HeadingNode); const removeListType = editor.addNodeType('list', ListNode); const removeQuoteType = editor.addNodeType('quote', QuoteNode); return () => { - removeHeaderType(); + removeHeadingType(); removeListType(); removeQuoteType(); };