remove marks, in favor of text properties (#3235)

* remove marks, in favor of text properties

* fix lint

* fix more examples

* update docs

packages/slate-hyperscript/src/creators.ts

@@ -1,9 +1,7 @@
 import {
   Element,
   Descendant,
-  Mark,
   Node,
-  Path,
   Range,
   Text,
   Editor,
@@ -37,7 +35,7 @@ const resolveDescendants = (children: any[]): Descendant[] => {
     const prev = nodes[nodes.length - 1]
 
     if (typeof child === 'string') {
-      const text = { text: child, marks: [] }
+      const text = { text: child }
       STRINGS.add(text)
       child = text
     }
@@ -49,8 +47,7 @@ const resolveDescendants = (children: any[]): Descendant[] => {
         Text.isText(prev) &&
         STRINGS.has(prev) &&
         STRINGS.has(c) &&
-        c.marks.every(m => Mark.exists(m, prev.marks)) &&
-        prev.marks.every(m => Mark.exists(m, c.marks))
+        Text.equals(prev, c, { loose: true })
       ) {
         prev.text += c.text
       } else {
@@ -143,43 +140,6 @@ export function createFragment(
   return resolveDescendants(children)
 }
 
-/**
- * Create a `Text` object with a mark applied.
- */
-
-export function createMark(
-  tagName: string,
-  attributes: { [key: string]: any },
-  children: any[]
-): Text {
-  const mark = { ...attributes }
-  const nodes = resolveDescendants(children)
-
-  if (nodes.length > 1) {
-    throw new Error(
-      `The <mark> hyperscript tag must only contain a single node's worth of children.`
-    )
-  }
-
-  if (nodes.length === 0) {
-    return { text: '', marks: [mark] }
-  }
-
-  const [node] = nodes
-
-  if (!Text.isText(node)) {
-    throw new Error(
-      `The <mark> hyperscript tag must only contain text content as children.`
-    )
-  }
-
-  if (!Mark.exists(mark, node.marks)) {
-    node.marks.push(mark)
-  }
-
-  return node
-}
-
 /**
  * Create a `Selection` object.
  */
@@ -237,7 +197,7 @@ export function createText(
   let [node] = nodes
 
   if (node == null) {
-    node = { text: '', marks: [] }
+    node = { text: '' }
   }
 
   if (!Text.isText(node)) {
@@ -245,8 +205,8 @@ export function createText(
     The <text> hyperscript tag can only contain text content as children.`)
   }
 
-  // COMPAT: Re-create the node, because if they used the <text> tag we want to
-  // guarantee that it won't be merge with other string children.
+  // COMPAT: If they used the <text> tag we want to guarantee that it won't be
+  // merge with other string children.
   STRINGS.delete(node)
 
   Object.assign(node, attributes)

packages/slate-hyperscript/src/hyperscript.ts

@@ -1,5 +1,5 @@
 import isPlainObject from 'is-plain-object'
-import { Element, Mark } from 'slate'
+import { Element } from 'slate'
 import {
   createAnchor,
   createCursor,
@@ -7,7 +7,6 @@ import {
   createElement,
   createFocus,
   createFragment,
-  createMark,
   createSelection,
   createText,
 } from './creators'
@@ -23,7 +22,6 @@ const DEFAULT_CREATORS = {
   element: createElement,
   focus: createFocus,
   fragment: createFragment,
-  mark: createMark,
   selection: createSelection,
   text: createText,
 }
@@ -54,16 +52,13 @@ const createHyperscript = (
   options: {
     creators?: HyperscriptCreators
     elements?: HyperscriptShorthands
-    marks?: HyperscriptShorthands
   } = {}
 ) => {
-  const { elements = {}, marks = {} } = options
+  const { elements = {} } = options
   const elementCreators = normalizeElements(elements)
-  const markCreators = normalizeMarks(marks)
   const creators = {
     ...DEFAULT_CREATORS,
     ...elementCreators,
-    ...markCreators,
     ...options.creators,
   }
 
@@ -132,32 +127,4 @@ const normalizeElements = (elements: HyperscriptShorthands) => {
   return creators
 }
 
-/**
- * Normalize a dictionary of mark shorthands into creator functions.
- */
-
-const normalizeMarks = (marks: HyperscriptShorthands) => {
-  const creators: HyperscriptCreators<Mark> = {}
-
-  for (const tagName in marks) {
-    const props = marks[tagName]
-
-    if (typeof props !== 'object') {
-      throw new Error(
-        `Properties specified for a hyperscript shorthand should be an object, but for the custom mark <${tagName}> tag you passed: ${props}`
-      )
-    }
-
-    creators[tagName] = (
-      tagName: string,
-      attributes: { [key: string]: any },
-      children: any[]
-    ) => {
-      return createMark('mark', { ...props, ...attributes }, children)
-    }
-  }
-
-  return creators
-}
-
 export { createHyperscript, HyperscriptCreators, HyperscriptShorthands }

packages/slate-hyperscript/src/tokens.ts

@@ -1,4 +1,4 @@
-import { Mark, Node, Path, Text } from 'slate'
+import { Node, Path, Text } from 'slate'
 
 /**
  * A weak map to hold anchor tokens.
@@ -23,23 +23,17 @@ export class Token {}
  */
 
 export class AnchorToken extends Token {
-  focused: boolean
-  marks: Mark[] | null
   offset?: number
   path?: Path
 
   constructor(
     props: {
-      focused?: boolean
-      marks?: Mark[] | null
       offset?: number
       path?: Path
     } = {}
   ) {
     super()
-    const { focused = true, marks = null, offset, path } = props
-    this.focused = focused
-    this.marks = marks
+    const { offset, path } = props
     this.offset = offset
     this.path = path
   }
@@ -50,23 +44,17 @@ export class AnchorToken extends Token {
  */
 
 export class FocusToken extends Token {
-  focused: boolean
-  marks: Mark[] | null
   offset?: number
   path?: Path
 
   constructor(
     props: {
-      focused?: boolean
-      marks?: Mark[] | null
       offset?: number
       path?: Path
     } = {}
   ) {
     super()
-    const { focused = true, marks = null, offset, path } = props
-    this.focused = focused
-    this.marks = marks
+    const { offset, path } = props
     this.offset = offset
     this.path = path
   }

packages/slate-hyperscript/test/fixtures/cursor-across-element.js

@@ -18,7 +18,6 @@ export const output = {
       children: [
         {
           text: 'word',
-          marks: [],
         },
       ],
     },

packages/slate-hyperscript/test/fixtures/cursor-across-elements-empty.js

@@ -23,7 +23,6 @@ export const output = {
       children: [
         {
           text: '',
-          marks: [],
         },
       ],
     },
@@ -31,7 +30,6 @@ export const output = {
       children: [
         {
           text: '',
-          marks: [],
         },
       ],
     },

packages/slate-hyperscript/test/fixtures/cursor-across-elements-end.js

@@ -21,7 +21,6 @@ export const output = {
       children: [
         {
           text: 'one',
-          marks: [],
         },
       ],
     },
@@ -29,7 +28,6 @@ export const output = {
       children: [
         {
           text: 'two',
-          marks: [],
         },
       ],
     },

packages/slate-hyperscript/test/fixtures/cursor-across-elements-middle.js

@@ -21,7 +21,6 @@ export const output = {
       children: [
         {
           text: 'one',
-          marks: [],
         },
       ],
     },
@@ -29,7 +28,6 @@ export const output = {
       children: [
         {
           text: 'two',
-          marks: [],
         },
       ],
     },

packages/slate-hyperscript/test/fixtures/cursor-across-elements-start.js

@@ -21,7 +21,6 @@ export const output = {
       children: [
         {
           text: 'one',
-          marks: [],
         },
       ],
     },
@@ -29,7 +28,6 @@ export const output = {
       children: [
         {
           text: 'two',
-          marks: [],
         },
       ],
     },

packages/slate-hyperscript/test/fixtures/cursor-element-empty.js

@@ -16,7 +16,6 @@ export const output = {
       children: [
         {
           text: '',
-          marks: [],
         },
       ],
     },

packages/slate-hyperscript/test/fixtures/cursor-element-end.js

@@ -17,7 +17,6 @@ export const output = {
       children: [
         {
           text: 'one',
-          marks: [],
         },
       ],
     },

packages/slate-hyperscript/test/fixtures/cursor-element-middle.js

@@ -17,7 +17,6 @@ export const output = {
       children: [
         {
           text: 'one',
-          marks: [],
         },
       ],
     },

packages/slate-hyperscript/test/fixtures/cursor-element-nested-end.js

@@ -21,7 +21,6 @@ export const output = {
           children: [
             {
               text: 'word',
-              marks: [],
             },
           ],
         },

packages/slate-hyperscript/test/fixtures/cursor-element-nested-middle.js

@@ -22,7 +22,6 @@ export const output = {
           children: [
             {
               text: 'word',
-              marks: [],
             },
           ],
         },

packages/slate-hyperscript/test/fixtures/cursor-element-nested-start.js

@@ -21,7 +21,6 @@ export const output = {
           children: [
             {
               text: 'word',
-              marks: [],
             },
           ],
         },

packages/slate-hyperscript/test/fixtures/cursor-element-start.js

@@ -17,7 +17,6 @@ export const output = {
       children: [
         {
           text: 'one',
-          marks: [],
         },
       ],
     },

packages/slate-hyperscript/test/fixtures/cursor-is-focused-false.js

@@ -1,34 +0,0 @@
-/** @jsx jsx */
-
-import { jsx } from 'slate-hyperscript'
-
-export const input = (
-  <editor>
-    <element>
-      <cursor focused={false} />
-    </element>
-  </editor>
-)
-
-export const output = {
-  children: [
-    {
-      children: [
-        {
-          text: '',
-          marks: [],
-        },
-      ],
-    },
-  ],
-  selection: {
-    anchor: {
-      path: [0, 0],
-      offset: 0,
-    },
-    focus: {
-      path: [0, 0],
-      offset: 0,
-    },
-  },
-}

packages/slate-hyperscript/test/fixtures/cursor-mark-after.js

@@ -1,40 +0,0 @@
-/** @jsx jsx */
-
-import { jsx } from 'slate-hyperscript'
-
-export const input = (
-  <editor>
-    <element>
-      <mark>one</mark>
-      <cursor />
-      two
-    </element>
-  </editor>
-)
-
-export const output = {
-  children: [
-    {
-      children: [
-        {
-          text: 'one',
-          marks: [{}],
-        },
-        {
-          text: 'two',
-          marks: [],
-        },
-      ],
-    },
-  ],
-  selection: {
-    anchor: {
-      path: [0, 0],
-      offset: 3,
-    },
-    focus: {
-      path: [0, 0],
-      offset: 3,
-    },
-  },
-}

packages/slate-hyperscript/test/fixtures/cursor-mark-end.js

@@ -1,42 +0,0 @@
-/** @jsx jsx */
-
-import { jsx } from 'slate-hyperscript'
-
-export const input = (
-  <editor>
-    <element>
-      <mark>
-        one
-        <cursor />
-      </mark>
-      two
-    </element>
-  </editor>
-)
-
-export const output = {
-  children: [
-    {
-      children: [
-        {
-          text: 'one',
-          marks: [{}],
-        },
-        {
-          text: 'two',
-          marks: [],
-        },
-      ],
-    },
-  ],
-  selection: {
-    anchor: {
-      path: [0, 0],
-      offset: 3,
-    },
-    focus: {
-      path: [0, 0],
-      offset: 3,
-    },
-  },
-}

packages/slate-hyperscript/test/fixtures/cursor-mark-middle.js

@@ -1,42 +0,0 @@
-/** @jsx jsx */
-
-import { jsx } from 'slate-hyperscript'
-
-export const input = (
-  <editor>
-    <element>
-      <mark>
-        o<cursor />
-        ne
-      </mark>
-      two
-    </element>
-  </editor>
-)
-
-export const output = {
-  children: [
-    {
-      children: [
-        {
-          text: 'one',
-          marks: [{}],
-        },
-        {
-          text: 'two',
-          marks: [],
-        },
-      ],
-    },
-  ],
-  selection: {
-    anchor: {
-      path: [0, 0],
-      offset: 1,
-    },
-    focus: {
-      path: [0, 0],
-      offset: 1,
-    },
-  },
-}

packages/slate-hyperscript/test/fixtures/cursor-mark-start.js

@@ -1,42 +0,0 @@
-/** @jsx jsx */
-
-import { jsx } from 'slate-hyperscript'
-
-export const input = (
-  <editor>
-    <element>
-      <mark>
-        <cursor />
-        one
-      </mark>
-      two
-    </element>
-  </editor>
-)
-
-export const output = {
-  children: [
-    {
-      children: [
-        {
-          text: 'one',
-          marks: [{}],
-        },
-        {
-          text: 'two',
-          marks: [],
-        },
-      ],
-    },
-  ],
-  selection: {
-    anchor: {
-      path: [0, 0],
-      offset: 0,
-    },
-    focus: {
-      path: [0, 0],
-      offset: 0,
-    },
-  },
-}

packages/slate-hyperscript/test/fixtures/cursor-marks-empty.js

@@ -1,34 +0,0 @@
-/** @jsx jsx */
-
-import { jsx } from 'slate-hyperscript'
-
-export const input = (
-  <editor>
-    <element>
-      <cursor marks={[]} />
-    </element>
-  </editor>
-)
-
-export const output = {
-  children: [
-    {
-      children: [
-        {
-          text: '',
-          marks: [],
-        },
-      ],
-    },
-  ],
-  selection: {
-    anchor: {
-      path: [0, 0],
-      offset: 0,
-    },
-    focus: {
-      path: [0, 0],
-      offset: 0,
-    },
-  },
-}

packages/slate-hyperscript/test/fixtures/cursor-text-empty.js

@@ -18,7 +18,6 @@ export const output = {
       children: [
         {
           text: '',
-          marks: [],
         },
       ],
     },

packages/slate-hyperscript/test/fixtures/element-custom.js

@@ -15,7 +15,6 @@ export const output = {
   children: [
     {
       text: 'word',
-      marks: [],
     },
   ],
 }

packages/slate-hyperscript/test/fixtures/element-nested-string.js

@@ -14,7 +14,6 @@ export const output = {
       children: [
         {
           text: 'word',
-          marks: [],
         },
       ],
     },

packages/slate-hyperscript/test/fixtures/element-string.js

@@ -8,7 +8,6 @@ export const output = {
   children: [
     {
       text: 'word',
-      marks: [],
     },
   ],
 }

packages/slate-hyperscript/test/fixtures/element-text-empty.js

@@ -12,7 +12,6 @@ export const output = {
   children: [
     {
       text: '',
-      marks: [],
     },
   ],
 }

packages/slate-hyperscript/test/fixtures/element-text-string.js

@@ -12,7 +12,6 @@ export const output = {
   children: [
     {
       text: 'word',
-      marks: [],
     },
   ],
 }

packages/slate-hyperscript/test/fixtures/fragment-element.js

@@ -13,7 +13,6 @@ export const output = [
     children: [
       {
         text: 'word',
-        marks: [],
       },
     ],
   },

packages/slate-hyperscript/test/fixtures/fragment-string.js

@@ -7,6 +7,5 @@ export const input = <fragment>word</fragment>
 export const output = [
   {
     text: 'word',
-    marks: [],
   },
 ]

packages/slate-hyperscript/test/fixtures/mark-custom.js

@@ -1,16 +0,0 @@
-/** @jsx jsx */
-
-import { createHyperscript } from 'slate-hyperscript'
-
-const jsx = createHyperscript({
-  marks: {
-    b: { type: 'bold' },
-  },
-})
-
-export const input = <b>word</b>
-
-export const output = {
-  text: 'word',
-  marks: [{ type: 'bold' }],
-}

packages/slate-hyperscript/test/fixtures/mark-nested-string.js

@@ -1,14 +0,0 @@
-/** @jsx jsx */
-
-import { jsx } from 'slate-hyperscript'
-
-export const input = (
-  <mark type="a">
-    <mark type="b">word</mark>
-  </mark>
-)
-
-export const output = {
-  text: 'word',
-  marks: [{ type: 'b' }, { type: 'a' }],
-}

packages/slate-hyperscript/test/fixtures/mark-string.js

@@ -1,10 +0,0 @@
-/** @jsx jsx */
-
-import { jsx } from 'slate-hyperscript'
-
-export const input = <mark>word</mark>
-
-export const output = {
-  text: 'word',
-  marks: [{}],
-}

packages/slate-hyperscript/test/fixtures/mark-text.js

@@ -1,14 +0,0 @@
-/** @jsx jsx */
-
-import { jsx } from 'slate-hyperscript'
-
-export const input = (
-  <mark>
-    <text>word</text>
-  </mark>
-)
-
-export const output = {
-  text: 'word',
-  marks: [{}],
-}

packages/slate-hyperscript/test/fixtures/selection.js

@@ -18,7 +18,6 @@ export const output = {
       children: [
         {
           text: 'word',
-          marks: [],
         },
       ],
     },

packages/slate-hyperscript/test/fixtures/text-empty.js

@@ -2,9 +2,9 @@
 
 import { jsx } from 'slate-hyperscript'
 
-export const input = <text />
+export const input = <text a />
 
 export const output = {
   text: '',
-  marks: [],
+  a: true,
 }

packages/slate-hyperscript/test/fixtures/text-full.js

@@ -2,9 +2,9 @@
 
 import { jsx } from 'slate-hyperscript'
 
-export const input = <text>word</text>
+export const input = <text a>word</text>
 
 export const output = {
   text: 'word',
-  marks: [],
+  a: true,
 }

packages/slate-hyperscript/test/fixtures/text-nested.js

@@ -3,12 +3,13 @@
 import { jsx } from 'slate-hyperscript'
 
 export const input = (
-  <text>
-    <text>word</text>
+  <text b>
+    <text a>word</text>
   </text>
 )
 
 export const output = {
   text: 'word',
-  marks: [],
+  a: true,
+  b: true,
 }