@brightspot/ui 3.0.0 → 3.0.1-cms-ui-migration.1

package/src/legacy/tool-ui/src/main/webapp/v4/rte/settings/BSSerializer.js

@@ -0,0 +1,819 @@
+import htmlEncode from 'js-htmlencode'
+import { getElementMarkupAsString } from '../utilities'
+import moment from 'moment'
+import { v1 as uuidv1 } from 'uuid'
+
+const PENDING = RTE_PENDING || 'Pending' /* global RTE_PENDING */
+
+/**
+ * A specification for serializing a ProseMirror document into
+ * the markup needed by the legacy CodeMirror RTE and our Java
+ * backend. Inspired by the ProseMirror markdown serializer, borrowing
+ * some functionality.
+ */
+export class BrightspotDOMSerializer {
+  /**
+   * Construct a serializer with the given configuration. The `nodes`
+   * object should map node names in a given schema to function that
+   * take a serializer state and such a node, and serialize the node.
+   *
+   * The `marks` object should hold objects with `open` and `close`
+   * properties, which hold the strings that should appear before and
+   * after a piece of text marked that way, either directly or as a
+   * function that takes a serializer state and a mark, and returns a
+   * string.
+   *
+   * The `expelEnclosingWhitespace` mark property causes the
+   * serializer to move enclosing whitespace from inside the marks to
+   * outside the marks.
+   *
+   * @param {Object} nodes
+   * @param {Object} marks
+   */
+  constructor(nodes, marks) {
+    this.nodes = nodes
+    this.marks = marks
+  }
+
+  /**
+   * Kicks off the serialization of the document.
+   *
+   * @param {ProseMirror.EditorState} editorState
+   * @param {Object} options
+   */
+  serialize(content, compliantTagNameMap, options) {
+    let state = new BrightspotDOMSerializerState(
+      this.nodes,
+      this.marks,
+      compliantTagNameMap,
+      options,
+    )
+    state.renderContent(content)
+    return state.out
+  }
+}
+
+const getRichTextNodes = () => {
+  const richTextNodes = {}
+  RICH_TEXT_ELEMENTS_PM.forEach((obj) => {
+    if (obj.popup || !obj.line) {
+      return
+    }
+    let tag = obj.tag
+    richTextNodes[obj.tag] = (state, node) => {
+      state.compliantTagNameMap.forEach((value, key) => {
+        if (tag === value) {
+          tag = key
+        }
+      })
+      state.writeTag(`<${tag}>`)
+      state.renderContent(node)
+      state.writeTag(`</${tag}>`)
+    }
+  })
+
+  return richTextNodes
+}
+
+const nonEditableEnhancements = [] // nodes
+const editableInlineWithFieldsEnhancements = [] // marks with attrs
+const editableLineWithFieldsEnhancements = [] // nodes text content with attrs
+const editableInlineWithNoFieldsEnhancements = [] // marks
+const editableLineWithNoFieldsEnhancements = [] // nodes text content
+
+RICH_TEXT_ELEMENTS_PM.forEach((obj) => {
+  if (obj.readOnly) {
+    nonEditableEnhancements.push(obj)
+  } else if (obj.popup) {
+    if (obj.line) {
+      editableLineWithFieldsEnhancements.push(obj)
+    } else {
+      editableInlineWithFieldsEnhancements.push(obj)
+    }
+  } else {
+    if (obj.line) {
+      editableLineWithNoFieldsEnhancements.push(obj)
+    } else {
+      editableInlineWithNoFieldsEnhancements.push(obj)
+    }
+  }
+})
+
+const getNonEditableEnhancements = () => {
+  const richTextNodes = {}
+  nonEditableEnhancements.forEach((obj) => {
+    richTextNodes[obj.tag] = (state, node) => {
+      const attributes = node.attrs.attributes
+      const metaObj = node.attrs.meta
+      const marks = node.marks.filter((mark) => !state.active.includes(mark))
+      let tag = metaObj.tag
+      state.compliantTagNameMap.forEach((value, key) => {
+        if (tag === value) {
+          tag = key
+        }
+      })
+
+      const label = node.attrs.label
+      let tagString = getElementMarkupAsString(tag, label, attributes)
+
+      marks.forEach((mark) => {
+        const markName = mark.type.name
+        const markAttrs = mark.attrs
+        tagString = getElementMarkupAsString(markName, tagString, markAttrs)
+      })
+
+      state.writeTag(tagString, false)
+    }
+  })
+
+  return richTextNodes
+}
+
+const getEditableNoFieldsLineEnhancements = () => {
+  const richTextNodes = {}
+  editableLineWithNoFieldsEnhancements.forEach((obj) => {
+    richTextNodes[obj.tag] = (state, node) => {
+      let tag = obj.tag
+      state.compliantTagNameMap.forEach((value, key) => {
+        if (tag === value) {
+          tag = key
+        }
+      })
+      state.writeTag(`<${tag}>`)
+      node.inlineContent ? state.renderInline(node) : state.renderContent(node)
+      state.writeTag(`</${tag}>`)
+    }
+  })
+  return richTextNodes
+}
+
+const getEditableLineWithFieldsEnhancements = () => {
+  const richTextNodes = {}
+  editableLineWithFieldsEnhancements.forEach((obj) => {
+    richTextNodes[obj.tag] = (state, node) => {
+      const attributes = node.attrs.attributes
+      const metaObj = node.attrs.meta
+      let tag = metaObj.tag
+      state.compliantTagNameMap.forEach((value, key) => {
+        if (tag === value) {
+          tag = key
+        }
+      })
+
+      if (attributes) {
+        let nodeAttributes = ''
+        Object.keys(attributes).forEach((key) => {
+          nodeAttributes = `${nodeAttributes} ${key}="${htmlEncode(
+            attributes[key],
+          )}"`
+        })
+        state.writeTag(`<${tag}${nodeAttributes}>`)
+      } else {
+        state.writeTag(`<${tag}>`)
+      }
+      node.inlineContent ? state.renderInline(node) : state.renderContent(node)
+      state.writeTag(`</${tag}>`)
+    }
+  })
+  return richTextNodes
+}
+
+const geteditableInlineWithFieldsEnhancements = () => {
+  const richTextMarks = {}
+  editableInlineWithFieldsEnhancements.forEach((obj) => {
+    let tag = obj.tag
+    richTextMarks[obj.tag] = {
+      open(state, mark) {
+        state.compliantTagNameMap.forEach((value, key) => {
+          if (tag === value) {
+            tag = key
+          }
+        })
+        const attributesJSON = mark.attrs.attributes
+        if (attributesJSON) {
+          let nodeAttributes = ''
+          Object.keys(attributesJSON).forEach((key) => {
+            if (key === 'id') {
+              return
+            }
+
+            const value = attributesJSON[key]
+
+            if (value == null) {
+              return
+            }
+
+            if (nodeAttributes) {
+              nodeAttributes += ` ${key}="${htmlEncode(value)}"`
+            } else {
+              nodeAttributes = `${key}="${htmlEncode(value)}"`
+            }
+          })
+          return `<${tag}${nodeAttributes ? ' ' + nodeAttributes : ''}>`
+        } else {
+          return `<${tag}>`
+        }
+      },
+      close(state) {
+        state.compliantTagNameMap.forEach((value, key) => {
+          if (tag === value) {
+            tag = key
+          }
+        })
+        return `</${tag}>`
+      },
+    }
+  })
+
+  return richTextMarks
+}
+
+const geteditableInlineWithNoFieldsEnhancements = () => {
+  const richTextMarks = {}
+  editableInlineWithNoFieldsEnhancements.forEach((obj) => {
+    let tag = obj.tag
+    richTextMarks[obj.tag] = {
+      open(state, mark) {
+        state.compliantTagNameMap.forEach((value, key) => {
+          if (tag === value) {
+            tag = key
+          }
+        })
+        const attributesJSON = mark.attrs.attributes
+
+        if (attributesJSON) {
+          let nodeAttributes = ''
+          Object.keys(attributesJSON).forEach((key) => {
+            if (key === 'id') {
+              return
+            }
+            nodeAttributes = `${nodeAttributes} ${key}="${htmlEncode(
+              attributesJSON[key],
+            )}"`
+          })
+          return `<${tag}${nodeAttributes}>`
+        } else {
+          return `<${tag}>`
+        }
+      },
+      close(state) {
+        state.compliantTagNameMap.forEach((value, key) => {
+          if (tag === value) {
+            tag = key
+          }
+        })
+        return `</${tag}>`
+      },
+    }
+  })
+
+  return richTextMarks
+}
+
+/**
+ * Default implementation of the BrightspotDOMSerializer.
+ */
+export const defaultBrightspotDOMSerializer = new BrightspotDOMSerializer(
+  {
+    line(state, node, parent, index) {
+      node.marks.forEach((mark) => {
+        state.text(state.marks[mark.type.name].open(state, mark), false)
+      })
+      state.renderInline(node)
+      if (node !== parent.lastChild) {
+        state.writeTag('<br/>')
+      }
+      node.marks.forEach((mark) => {
+        state.text(state.marks[mark.type.name].close, false)
+      })
+      state.closeBlock(node)
+    },
+    p(state, node, parent) {
+      state.renderInline(node)
+      if (node !== parent.lastChild) {
+        state.writeTag('<br/>')
+        if (!node.isSingleGraf) {
+          state.writeTag('<br/>')
+        }
+      }
+    },
+    text(state, node) {
+      state.write(node.text, node.marks)
+    },
+    alignLeft(state, node, parent) {
+      state.writeTag(`<div class="cms-textAlign-left">`)
+      state.renderInline(node)
+      state.closeBlock(node)
+      state.writeTag(`</div>`)
+    },
+    alignCenter(state, node, parent) {
+      state.writeTag(`<div class="cms-textAlign-center">`)
+      state.renderInline(node)
+      state.closeBlock(node)
+      state.writeTag(`</div>`)
+    },
+    alignRight(state, node, parent) {
+      state.writeTag(`<div class="cms-textAlign-right">`)
+      state.renderInline(node)
+      state.closeBlock(node)
+      state.writeTag(`</div>`)
+    },
+    ol(state, node) {
+      const attributes = node.attrs.attributes
+      // if the id already exists in the document, generate a new id
+      if (document.querySelectorAll(`[id="${node.attrs.id}"]`).length > 1) {
+        attributes.id = 'rte-' + uuidv1()
+      } else {
+        attributes.id = node.attrs.id
+      }
+      attributes['start'] = `${node.attrs.order}`
+      let nodeAttributes = ''
+      Object.keys(attributes).forEach((key) => {
+        nodeAttributes = `${nodeAttributes} ${key}="${htmlEncode(
+          attributes[key] || '',
+        )}"`
+      })
+      state.writeTag(`<ol${nodeAttributes}>`)
+      state.renderContent(node)
+      state.writeTag(`</ol>`)
+    },
+    ul(state, node) {
+      const attributes = node.attrs.attributes
+      if (document.querySelectorAll(`[id="${node.attrs.id}"]`).length > 1) {
+        attributes.id = 'rte-' + uuidv1()
+      } else {
+        attributes.id = node.attrs.id
+      }
+
+      let nodeAttributes = ''
+      Object.keys(attributes).forEach((key) => {
+        nodeAttributes = `${nodeAttributes} ${key}="${htmlEncode(
+          attributes[key] || '',
+        )}"`
+      })
+      state.writeTag(`<ul${nodeAttributes}>`)
+      state.renderContent(node)
+      state.writeTag(`</ul>`)
+    },
+    listItem(state, node) {
+      state.writeTag(`<li>`)
+      state.renderContent(node)
+      state.writeTag(`</li>`)
+    },
+    listItemDiv(state, node) {
+      state.renderInline(node)
+      state.closeBlock(node)
+    },
+    table(state, node) {
+      const attributes = node.attrs.attributes
+      attributes.id = node.attrs.id
+      if (document.querySelectorAll(`[id="${node.attrs.id}"]`).length > 1) {
+        attributes.id = 'rte-' + uuidv1()
+      } else {
+        attributes.id = node.attrs.id
+      }
+      let nodeAttributes = ''
+      Object.keys(attributes).forEach((key) => {
+        nodeAttributes = `${nodeAttributes} ${key}="${htmlEncode(
+          attributes[key] || '',
+        )}"`
+      })
+      state.writeTag(`<table ${nodeAttributes}>`)
+      state.renderContent(node)
+      state.writeTag(`</table>`)
+    },
+    tbody(state, node) {
+      state.writeTag(`<tbody>`)
+      state.renderContent(node)
+      state.writeTag(`</tbody>`)
+    },
+    tableRow(state, node) {
+      const attributes = node.attrs.attributes
+      let nodeAttributes = ''
+      Object.keys(attributes).forEach((key) => {
+        nodeAttributes = `${nodeAttributes} ${key}="${htmlEncode(
+          attributes[key] || '',
+        )}"`
+      })
+      state.writeTag(`<tr ${nodeAttributes}>`)
+      state.renderContent(node)
+      state.writeTag(`</tr>`)
+    },
+    tableCell(state, node) {
+      const attributes = node.attrs.attributes
+      let nodeAttributes = ''
+      Object.keys(attributes).forEach((key) => {
+        nodeAttributes = `${nodeAttributes} ${key}="${htmlEncode(
+          attributes[key] || '',
+        )}"`
+      })
+      const colspan = node.attrs.colspan
+      const rowspan = node.attrs.rowspan
+      state.writeTag(
+        `<td colspan="${colspan}" rowspan="${rowspan}" ${nodeAttributes}>`,
+      )
+      state.renderContent(node)
+      state.writeTag(`</td>`)
+    },
+    tableHeader(state, node) {
+      state.writeTag(`<th>`)
+      state.renderContent(node)
+      state.writeTag(`</th>`)
+    },
+    ...getRichTextNodes(),
+    ...getEditableNoFieldsLineEnhancements(),
+    ...getEditableLineWithFieldsEnhancements(),
+    ...getNonEditableEnhancements(),
+  },
+  {
+    bold: {
+      open: '<b>',
+      close: '</b>',
+    },
+    italic: {
+      open: '<i>',
+      close: '</i>',
+    },
+    underline: {
+      open: '<u>',
+      close: '</u>',
+    },
+    strikethrough: {
+      open: '<s>',
+      close: '</s>',
+    },
+    superscript: {
+      open: '<sup>',
+      close: '</sup>',
+    },
+    subscript: {
+      open: '<sub>',
+      close: '</sub>',
+    },
+    ai: {
+      open(state, mark) {
+        const time =
+          mark.attrs['data-time'] === PENDING
+            ? moment().format('MM/D/YYYY h:mm:ss A')
+            : mark.attrs['data-time']
+
+        return `<ai 
+          data-user-label="${mark.attrs['data-user-label']}" 
+          data-time="${time}" 
+          data-user-id="${mark.attrs['data-user-id']}"
+          data-chat-id="${mark.attrs['data-chat-id']}"
+          data-response-id="${mark.attrs['data-response-id']}">`
+      },
+      close: '</ai>',
+    },
+    aiInlineIns: {
+      open(state, mark) {
+        const time =
+          mark.attrs['data-time'] === PENDING
+            ? moment().format('MM/D/YYYY h:mm:ss A')
+            : mark.attrs['data-time']
+
+        return `<ai-inline-ins 
+          data-user-label="${mark.attrs['data-user-label']}" 
+          data-time="${time}" 
+          data-user-id="${mark.attrs['data-user-id']}"
+          data-chat-id="${mark.attrs['data-chat-id']}"
+          data-response-id="${mark.attrs['data-response-id']}">`
+      },
+      close: '</ai-inline-ins>',
+    },
+    aiInlineDel: {
+      open(state, mark) {
+        const time =
+          mark.attrs['data-time'] === PENDING
+            ? moment().format('MM/D/YYYY h:mm:ss A')
+            : mark.attrs['data-time']
+
+        return `<ai-inline-del
+          data-user-label="${mark.attrs['data-user-label']}" 
+          data-time="${time}" 
+          data-user-id="${mark.attrs['data-user-id']}"
+          data-chat-id="${mark.attrs['data-chat-id']}"
+          data-response-id="${mark.attrs['data-response-id']}">`
+      },
+      close: '</ai-inline-del>',
+    },
+    ins: {
+      open(state, mark) {
+        const time =
+          mark.attrs['data-time'] === PENDING
+            ? moment().format('MM/D/YYYY h:mm:ss A')
+            : mark.attrs['data-time']
+
+        return `<ins 
+          data-user-label="${mark.attrs['data-user-label']}" 
+          data-time="${time}" 
+          data-user-id="${mark.attrs['data-user-id']}"
+          data-target-id="${mark.attrs['data-target-id']}">`
+      },
+      close: '</ins>',
+    },
+    del: {
+      open(state, mark) {
+        const time =
+          mark.attrs['data-time'] === PENDING
+            ? moment().format('MM/D/YYYY h:mm:ss A')
+            : mark.attrs['data-time']
+
+        return `<del 
+          data-user-label="${mark.attrs['data-user-label']}" 
+          data-time="${time}" 
+          data-user-id="${mark.attrs['data-user-id']}"
+          data-target-id="${mark.attrs['data-target-id']}">`
+      },
+      close: '</del>',
+    },
+    ...geteditableInlineWithFieldsEnhancements(),
+    ...geteditableInlineWithNoFieldsEnhancements(),
+    html: {
+      open: '',
+      close: '',
+      shouldNotEncode: true,
+    },
+    comment: {
+      open(state, mark) {
+        const replies = mark.attrs['data-replies']
+        return `<span class="rte rte-comment"
+          data-user-id="${mark.attrs['data-user-id']}"
+          data-user-label="${mark.attrs['data-user-label']}"
+          data-time="${mark.attrs['data-time']}"
+          data-replies="${replies ? htmlEncode(replies) : ''}"
+          data-collapse="${mark.attrs['data-collapse']}">`
+      },
+      close: '</span>',
+    },
+  },
+)
+
+/**
+ * This is an object used to track state and expose
+ * methods related to serialization. Instances are passed to
+ * node and mark serialization methods. This functionality
+ * is mostly lifted from the ProseMirror Markdown serializer.
+ */
+export class BrightspotDOMSerializerState {
+  constructor(nodes, marks, compliantTagNameMap, options) {
+    this.nodes = nodes
+    this.marks = marks
+    this.delim = this.out = ''
+    this.closed = false
+    this.inTightList = false
+    this.active = []
+    this.options = options || {}
+    this.compliantTagNameMap = compliantTagNameMap
+    if (typeof this.options.tightLists === 'undefined') {
+      this.options.tightLists = false
+    }
+  }
+
+  flushClose(size) {
+    if (this.closed) {
+      if (!this.atBlank()) this.out += '\n'
+      if (size == null) size = 2
+      if (size > 1) {
+        let delimMin = this.delim
+        let trim = /\s+$/.exec(delimMin)
+        if (trim) delimMin = delimMin.slice(0, delimMin.length - trim[0].length)
+        for (let i = 1; i < size; i++) this.out += delimMin + '\n'
+      }
+      this.closed = false
+    }
+  }
+
+  /**
+   * Render a block, prefixing each line with `delim`, and the first
+   * line in `firstDelim`. `node` should be the node that is closed at
+   * the end of the block, and `f` is a function that renders the
+   * content of the block.
+   */
+  wrapBlock(delim, firstDelim, node, f) {
+    let old = this.delim
+    this.write(firstDelim || delim)
+    this.delim += delim
+    f()
+    this.delim = old
+    this.closeBlock(node)
+  }
+
+  atBlank() {
+    return this.out.length === 0 || this.out === '\n'
+  }
+
+  /**
+   * Prepare the state for writing output (closing closed paragraphs,
+   * adding delimiters, and so on), and then optionally add content
+   * (unescaped) to the output.
+   */
+  write(content, marks = []) {
+    if (!content) {
+      return
+    }
+
+    let shouldNotEncode = false
+
+    if (marks && marks.some) {
+      shouldNotEncode = marks.some((mark) => {
+        return (
+          this.marks[mark.type.name] &&
+          this.marks[mark.type.name].shouldNotEncode
+        )
+      })
+    }
+
+    if (shouldNotEncode) {
+      this.out += content
+    } else {
+      // Always let Javascript DOM APIs handle the proper escaping of possible markup
+      // and/or entities in the content.
+      let container = document.createElement('div')
+      let textNode = document.createTextNode(content)
+      container.appendChild(textNode)
+
+      this.out += container.innerHTML
+    }
+  }
+
+  writeTag(content) {
+    if (!content) {
+      return
+    }
+    this.out += content
+  }
+
+  /**
+   * Close the block for the given node.
+   */
+  closeBlock(node) {
+    this.closed = node
+  }
+
+  /**
+   * Add the given text to the document. When escape is not `false`,
+   * it will be escaped.
+   */
+  text(text, escape) {
+    let lines = text.split('\n')
+    for (let i = 0; i < lines.length; i++) {
+      var startOfLine = this.atBlank() || this.closed
+      this.write()
+      this.out += escape !== false ? this.esc(lines[i], startOfLine) : lines[i]
+    }
+  }
+
+  /**
+   * Render the given node as a block.
+   * @param {ProseMirror.Model.Node} node
+   * @param {ProseMirror.Model.Node} parent
+   * @param {number} index
+   */
+  render(node, parent, index) {
+    if (typeof parent === 'number') throw new Error('!')
+    this.nodes[node.type.name](this, node, parent, index)
+  }
+
+  /**
+   * Render the contents of `parent` as block nodes.
+   * @param {ProseMirror.Model.Node} parent
+   */
+  renderContent(parent) {
+    parent.forEach((node, _, i) => this.render(node, parent, i))
+  }
+
+  /**
+   * Render the contents of `parent` as inline content.
+   * @param {ProseMirror.Model.Node} parent
+   */
+  renderInline(parent) {
+    let trailing = ''
+    let progress = (node, _, index) => {
+      let marks = node ? node.marks : []
+      if (node && node.type.name === 'hard_break') {
+        marks = marks.filter((m) => {
+          if (index + 1 === parent.childCount) return false
+          let next = parent.child(index + 1)
+          return m.isInSet(next.marks) && (!next.isText || /\S/.test(next.text))
+        })
+      }
+
+      let leading = trailing
+      trailing = ''
+      // If whitespace has to be expelled from the node, adjust
+      // leading and trailing accordingly.
+      if (
+        node &&
+        node.isText &&
+        marks.some((mark) => {
+          let info = this.marks[mark.type.name]
+          return info && info.expelEnclosingWhitespace
+        })
+      ) {
+        let [, lead, inner, trail] = /^(\s*)(.*?)(\s*)$/m.exec(node.text)
+        leading += lead
+        trailing = trail
+        if (lead || trail) {
+          node = inner ? node.withText(inner) : null
+          if (!node) marks = this.active
+        }
+      }
+
+      let inner = marks.length && marks[marks.length - 1]
+      let noEsc = inner && this.marks[inner.type.name].escape === false
+      let len = marks.length - (noEsc ? 1 : 0)
+
+      // Find the prefix of the mark set that didn't change
+      let keep = 0
+      while (
+        keep < Math.min(this.active.length, len) &&
+        marks[keep].eq(this.active[keep])
+      ) {
+        ++keep
+      }
+
+      // Close the marks that need to be closed
+      while (keep < this.active.length) {
+        this.text(this.markString(this.active.pop(), false), false)
+      }
+
+      // Output any previously expelled trailing whitespace outside the marks
+      if (leading) this.text(leading)
+
+      // Open the marks that need to be opened
+      if (node) {
+        while (this.active.length < len) {
+          let add = marks[this.active.length]
+          this.active.push(add)
+          this.text(this.markString(add, true), false)
+        }
+
+        // Render the node. Special case code marks, since their content
+        // may not be escaped.
+        if (noEsc && node.isText) {
+          this.text(
+            this.markString(inner, true) +
+              node.text +
+              this.markString(inner, false),
+            false,
+          )
+        } else this.render(node, parent, index)
+      }
+    }
+    parent.forEach(progress)
+    progress(null)
+  }
+
+  /**
+   * Render a node's content as a list. `delim` should be the extra
+   * indentation added to all lines except the first in an item,
+   * `firstDelim` is a function going from an item index to a
+   * delimiter for the first line of the item.
+   *
+   * @param {ProseMirror.Model.Node} node
+   * @param {string} delim
+   * @param {string} firstDelim
+   */
+  renderList(node, delim, firstDelim) {
+    if (this.closed && this.closed.type === node.type) this.flushClose(3)
+    else if (this.inTightList) this.flushClose(1)
+
+    let isTight =
+      typeof node.attrs.tight !== 'undefined'
+        ? node.attrs.tight
+        : this.options.tightLists
+    let prevTight = this.inTightList
+    this.inTightList = isTight
+    node.forEach((child, _, i) => {
+      if (i && isTight) this.flushClose(1)
+      this.wrapBlock(delim, firstDelim(i), node, () =>
+        this.render(child, node, i),
+      )
+    })
+    this.inTightList = prevTight
+  }
+
+  /**
+   * Escape the given string so that it can safely appear in Markdown
+   * content. If `startOfLine` is true, also escape characters that
+   * has special meaning only at the start of the line.
+   *
+   * @param {string} str
+   * @param {boolean} startOfLine
+   */
+  esc(str, startOfLine) {
+    str = str.replace(/[`*\\~[\]]/g, '\\$&')
+    if (startOfLine) {
+      str = str.replace(/^[:#\-*+]/, '\\$&').replace(/^(\d+)\./, '$1\\.')
+    }
+    return str
+  }
+
+  markString(mark, open) {
+    let info = this.marks[mark.type.name]
+    let value = open ? info.open : info.close
+    return typeof value === 'string' ? value : value(this, mark)
+  }
+}