Implement link editor (#20)

* feat: implement link editor

* feat: update slate to 0.58.3

packages/example/src/plugins/block.ts

@@ -0,0 +1,30 @@
+import { Transforms, Editor } from 'slate'
+
+const LIST_TYPES: string[] = ['numbered-list', 'bulleted-list']
+
+export const toggleBlock = (editor: any, format: any) => {
+  const isActive = isBlockActive(editor, format)
+  const isList = LIST_TYPES.includes(format)
+
+  Transforms.unwrapNodes(editor, {
+    match: n => LIST_TYPES.includes(n.type as any),
+    split: true
+  })
+
+  Transforms.setNodes(editor, {
+    type: isActive ? 'paragraph' : isList ? 'list-item' : format
+  })
+
+  if (!isActive && isList) {
+    const block = { type: format, children: [] }
+    Transforms.wrapNodes(editor, block)
+  }
+}
+
+export const isBlockActive = (editor: any, format: any) => {
+  const [match] = Editor.nodes(editor, {
+    match: n => n.type === format
+  })
+
+  return !!match
+}

packages/example/src/plugins/link.ts

@@ -0,0 +1,73 @@
+import isUrl from 'is-url'
+
+import { Transforms, Editor, Range } from 'slate'
+
+export interface LinkEditor extends Editor {
+  insertData: (data: any) => void
+}
+
+export const withLinks = <T extends Editor>(editor: T) => {
+  const e = editor as T & LinkEditor
+
+  const { insertData, insertText, isInline } = e
+
+  e.isInline = (element: any) => {
+    return element.type === 'link' ? true : isInline(element)
+  }
+
+  e.insertText = (text: string) => {
+    if (text && isUrl(text)) {
+      wrapLink(editor, text)
+    } else {
+      insertText(text)
+    }
+  }
+
+  e.insertData = (data: any) => {
+    const text = data.getData('text/plain')
+
+    if (text && isUrl(text)) {
+      wrapLink(editor, text)
+    } else {
+      insertData(data)
+    }
+  }
+
+  return editor
+}
+
+export const insertLink = (editor: Editor, href: string) => {
+  if (editor.selection) {
+    wrapLink(editor, href)
+  }
+}
+
+export const isLinkActive = (editor: Editor) => {
+  const [link] = Editor.nodes(editor, { match: n => n.type === 'link' })
+  return !!link
+}
+
+export const unwrapLink = (editor: Editor) => {
+  Transforms.unwrapNodes(editor, { match: n => n.type === 'link' })
+}
+
+export const wrapLink = (editor: Editor, href: string) => {
+  if (isLinkActive(editor)) {
+    unwrapLink(editor)
+  }
+
+  const { selection } = editor
+  const isCollapsed = selection && Range.isCollapsed(selection)
+  const link = {
+    type: 'link',
+    href,
+    children: isCollapsed ? [{ text: href }] : []
+  }
+
+  if (isCollapsed) {
+    Transforms.insertNodes(editor, link)
+  } else {
+    Transforms.wrapNodes(editor, link, { split: true })
+    Transforms.collapse(editor, { edge: 'end' })
+  }
+}

packages/example/src/plugins/mark.ts

@@ -0,0 +1,16 @@
+import { Editor } from 'slate'
+
+export const toggleMark = (editor: Editor, format: any) => {
+  const isActive = isMarkActive(editor, format)
+
+  if (isActive) {
+    Editor.removeMark(editor, format)
+  } else {
+    Editor.addMark(editor, format, true)
+  }
+}
+
+export const isMarkActive = (editor: Editor, format: any) => {
+  const marks = Editor.marks(editor)
+  return marks ? marks[format] === true : false
+}