JavaScript slate Mark Examples

Example #1

File: with-mark-object.js Project: yjpark/slate

export default function(editor) {
  editor.addMarks([
    Mark.create({
      type: 'bold',
      data: { thing: 'value' },
    }),
    Mark.create({
      type: 'italic',
      data: { thing2: 'value2' },
    }),
  ])
}

Example #2

File: with-mark-object.js Project: ianstormtaylor/slate

export default function(editor) {
  editor.addMark(
    Mark.create({
      type: 'bold',
      data: { thing: 'value' },
    })
  )
}

Example #3

File: creators.js Project: ianstormtaylor/slate

export function createLeaves(tagName, attributes, children) {
  const { marks = Mark.createSet() } = attributes
  let length = 0
  let leaves = Leaf.createList([])
  let leaf

  children.forEach(child => {
    if (Leaf.isLeafList(child)) {
      if (leaf) {
        leaves = leaves.push(leaf)
        leaf = null
      }

      child.forEach(l => {
        l = preservePoint(l, obj => obj.addMarks(marks))
        leaves = leaves.push(l)
      })
    } else {
      if (!leaf) {
        leaf = Leaf.create({ marks, text: '' })
        length = 0
      }

      if (typeof child === 'string') {
        const offset = leaf.text.length
        leaf = preservePoint(leaf, obj => obj.insertText(offset, child))
        length += child.length
      }

      if (isPoint(child)) {
        setPoint(leaf, child, length)
      }
    }
  })

  if (!leaves.size && !leaf) {
    leaf = Leaf.create({ marks, text: '' })
  }

  if (leaf) {
    leaves = leaves.push(leaf)
  }

  return leaves
}

Example #4

File: strikethrough.js Project: js-mk/canner-slate-editor

export default function(
  type: string,
  currentTextNode: Text,
  matched: any,
  change: Change
) {
  const matchedLength = matched[0].length;
  const addText = matched[0].trim().replace(new RegExp(/~/, "g"), "");

  return change
    .deleteAtRange(
      Range.create({
        anchorKey: currentTextNode.key,
        focusKey: currentTextNode.key,
        anchorOffset: matched.index,
        focusOffset: matched.index + matchedLength
      })
    )
    .insertTextByKey(currentTextNode.key, matched.index, addText, [
      Mark.create({ type })
    ])
    .call(removeAllMark);
}

Example #5

File: creators.js Project: yjpark/slate

export function createMark(tagName, attributes, children) {
  const { key, ...mark } = attributes
  const marks = Mark.createSet([mark])
  const list = createChildren(children)
  let node

  if (list.size > 1) {
    throw new Error(
      `The <mark> hyperscript tag must only contain a single node's worth of children.`
    )
  } else if (list.size === 0) {
    node = Text.create({ key, marks })
  } else {
    node = list.first()

    node = preservePoints(node, n => {
      if (key) n = n.set('key', key)
      if (marks) n = n.set('marks', n.marks.union(marks))
      return n
    })
  }

  return node
}

Example #6

File: null-text-with-marks.js Project: ianstormtaylor/slate

/** @jsx h */

import { Set } from 'immutable'
import h from '../../../../helpers/h'
import { Mark } from 'slate'

export const input = (
  <text>
    <b />
  </text>
)

export default function(t) {
  return t.getMarks()
}

export const output = Set.of(Mark.create('bold'))

Example #7

File: slate-prop-types.js Project: EirikBirkeland/slatejs-react

 marks: create('Set<Mark>', function (v) {
   return slate.Mark.isMarkSet(v);
 }),

Example #8

File: slate-prop-types.js Project: EirikBirkeland/slatejs-react

 mark: create('Mark', function (v) {
   return slate.Mark.isMark(v);
 }),

Example #9

File: index.js Project: ianstormtaylor/slate

 marks: create('Set<Mark>', v => Mark.isMarkSet(v)),

Example #10

File: index.js Project: ianstormtaylor/slate

 mark: create('Mark', v => Mark.isMark(v)),

Example #11

File: creators.js Project: ianstormtaylor/slate

export function createMark(tagName, attributes, children) {
  const marks = Mark.createSet([attributes])
  const leaves = createLeaves('leaves', { marks }, children)
  return leaves
}

Example #12

File: marked-text.js Project: ianstormtaylor/slate

export default function(t) {
  return t.updateMark(0, 3, Mark.create('bold'), { data: { x: 1 } })
}

Example #13

File: adject-same-marks.js Project: ianstormtaylor/slate

/** @jsx h */

import h from '../../../../helpers/h'
import { Set } from 'immutable'
import { Mark } from 'slate'

export const input = (
  <text>
    <b>
      <i>Cat is </i>
      <i>Cute</i>
    </b>
  </text>
)

export default function(t) {
  return t.getActiveMarks()
}

export const output = Set.of(Mark.create('italic'), Mark.create('bold'))

Example #14

File: index.js Project: SamyPesse/slate

    })
  },

  focus(tagName, attributes, children) {
    return FOCUS
  },

  inline(tagName, attributes, children) {
    return Inline.create({
      ...attributes,
      nodes: createChildren(children),
    })
  },

  mark(tagName, attributes, children) {
    const marks = Mark.createSet([attributes])
    const nodes = createChildren(children, { marks })
    return nodes
  },

  selection(tagName, attributes, children) {
    return Range.create(attributes)
  },

  value(tagName, attributes, children) {
    const { data } = attributes
    const document = children.find(Document.isDocument)
    let selection = children.find(Range.isRange) || Range.create()
    const props = {}

    // Search the document's texts to see if any of them have the anchor or

Example #15

File: creators.js Project: yjpark/slate

 node = preservePoints(node, n => {
   if (key) n = n.set('key', key)
   if (marks) n = n.set('marks', Mark.createSet(marks))
   return n
 })