@standardnotes/markdown-visual 1.0.7 → 1.3.0

package/src/components/Milkdown/plugins/advanced-menu/button.ts

@@ -0,0 +1,102 @@
+/* Copyright 2021, Milkdown by Mirone. */
+
+import { css } from '@emotion/css'
+import { CmdKey, commandsCtx, Ctx } from '@milkdown/core'
+import type { Icon } from '@milkdown/design-system'
+import type { EditorView } from '@milkdown/prose'
+import type { Utils } from '@milkdown/utils'
+
+import type { MenuCommonConfig } from './config'
+
+type RequireAtLeastOne<T, Keys extends keyof T = keyof T> = Pick<T, Exclude<keyof T, Keys>> &
+  {
+    [K in Keys]-?: Required<Pick<T, K>> & Partial<Pick<T, Exclude<Keys, K>>>
+  }[Keys]
+
+type Config<T = any> = {
+  type: 'button'
+  icon: Icon
+  key?: CmdKey<T>
+  callback?: () => void
+  options?: T
+  active?: (view?: EditorView) => boolean
+  alwaysVisible: boolean
+} & MenuCommonConfig
+
+export type ButtonConfig = RequireAtLeastOne<Config, 'key' | 'callback'>
+
+export const button = (utils: Utils, config: Config, ctx: Ctx, view: EditorView) => {
+  const buttonStyle = utils.getStyle((themeTool) => {
+    return css`
+      border: 0;
+      box-sizing: unset;
+      width: 1.5rem;
+      height: 1.5rem;
+      padding: 0.25rem;
+      margin: 0.5rem;
+      flex-shrink: 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background-color: ${themeTool.palette('surface')};
+      color: ${themeTool.palette('solid')};
+      transition: all 0.4s ease-in-out;
+      cursor: pointer;
+      &.active,
+      &:hover {
+        background-color: ${themeTool.palette('secondary', 0.12)};
+        color: ${themeTool.palette('primary')};
+      }
+      &:disabled {
+        display: none;
+      }
+    `
+  })
+
+  const $button = document.createElement('button')
+  $button.setAttribute('type', 'button')
+  $button.classList.add('button')
+
+  if (buttonStyle) {
+    $button.classList.add(buttonStyle)
+  }
+
+  const $label = utils.themeTool.slots.label(config.icon)
+  if ($label) {
+    $button.setAttribute('aria-label', $label)
+    $button.setAttribute('title', $label)
+  }
+
+  const $icon = utils.themeTool.slots.icon(config.icon)
+  $button.appendChild($icon)
+  $button.addEventListener('click', (e) => {
+    e.preventDefault()
+    e.stopPropagation()
+
+    config.callback && config.callback()
+    config.key && ctx.get(commandsCtx).call(config.key, config.options)
+  })
+
+  if (config.active) {
+    const active = config.active()
+    if (active) {
+      $button.classList.add('active')
+    } else {
+      $button.classList.remove('active')
+    }
+  }
+
+  if (config.alwaysVisible) {
+    $button.removeAttribute('disabled')
+    return $button
+  }
+
+  const disabled = !view.editable || (config.disabled && config.disabled(view))
+  if (disabled) {
+    $button.setAttribute('disabled', 'true')
+  } else {
+    $button.removeAttribute('disabled')
+  }
+
+  return $button
+}

package/src/components/Milkdown/plugins/advanced-menu/config.ts

@@ -0,0 +1,94 @@
+import {
+  InsertHr,
+  InsertImage,
+  LiftListItem,
+  SinkListItem,
+  WrapInBlockquote,
+  WrapInBulletList,
+  WrapInOrderedList,
+} from '@milkdown/preset-commonmark'
+import { InsertTable, TurnIntoTaskList } from '@milkdown/preset-gfm'
+import { EditorView, liftListItem, sinkListItem, wrapIn } from '@milkdown/prose'
+import { ButtonConfig } from './button'
+import { SelectConfig } from './select'
+
+export type MenuCommonConfig = {
+  disabled?: (view: EditorView) => boolean
+}
+
+export type MenuConfigItem = SelectConfig | ButtonConfig
+export type MenuConfig = Array<Array<MenuConfigItem>>
+
+export const menuConfig: any = [
+  [
+    {
+      type: 'button',
+      icon: 'bulletList',
+      key: WrapInBulletList,
+      disabled: (view: EditorView) => {
+        const { state } = view
+        return !wrapIn(state.schema.nodes.bullet_list)(state)
+      },
+    },
+    {
+      type: 'button',
+      icon: 'orderedList',
+      key: WrapInOrderedList,
+      disabled: (view: EditorView) => {
+        const { state } = view
+        return !wrapIn(state.schema.nodes.ordered_list)(state)
+      },
+    },
+    {
+      type: 'button',
+      icon: 'taskList',
+      key: TurnIntoTaskList,
+      disabled: (view: EditorView) => {
+        const { state } = view
+        return !wrapIn(state.schema.nodes.task_list_item)(state)
+      },
+    },
+    {
+      type: 'button',
+      icon: 'liftList',
+      key: LiftListItem,
+      disabled: (view: EditorView) => {
+        const { state } = view
+        return !liftListItem(state.schema.nodes.list_item)(state)
+      },
+    },
+    {
+      type: 'button',
+      icon: 'sinkList',
+      key: SinkListItem,
+      disabled: (view: EditorView) => {
+        const { state } = view
+        return !sinkListItem(state.schema.nodes.list_item)(state)
+      },
+    },
+  ],
+  [
+    {
+      type: 'button',
+      icon: 'image',
+      key: InsertImage,
+    },
+    {
+      type: 'button',
+      icon: 'table',
+      key: InsertTable,
+    },
+  ],
+  [
+    {
+      type: 'button',
+      icon: 'quote',
+      key: WrapInBlockquote,
+    },
+    {
+      type: 'button',
+      icon: 'divider',
+      key: InsertHr,
+    },
+  ],
+]

package/src/components/Milkdown/plugins/advanced-menu/divider.ts

@@ -0,0 +1,37 @@
+/* Copyright 2021, Milkdown by Mirone. */
+
+import { css } from '@emotion/css'
+import { Utils } from '@milkdown/utils'
+
+export type DividerConfig = {
+  type: 'divider'
+  group: HTMLElement[]
+}
+
+export const divider = (utils: Utils, config: DividerConfig) => {
+  const dividerStyle = utils.getStyle((themeTool) => {
+    return css`
+      flex-shrink: 0;
+      width: ${themeTool.size.lineWidth};
+      background-color: ${themeTool.palette('line')};
+      margin: 0.75rem 1rem;
+    `
+  })
+
+  const $divider = document.createElement('div')
+  $divider.classList.add('divider')
+
+  if (dividerStyle) {
+    $divider.classList.add(dividerStyle)
+  }
+
+  const disabled = config.group.every((x) => x.getAttribute('disabled') || x.classList.contains('disabled'))
+
+  if (disabled) {
+    $divider.classList.add('disabled')
+  } else {
+    $divider.classList.remove('disabled')
+  }
+
+  return $divider
+}

package/src/components/Milkdown/plugins/advanced-menu/index.ts

@@ -0,0 +1,64 @@
+/* Copyright 2021, Milkdown by Mirone. */
+
+import { createCmd, createCmdKey, Ctx } from '@milkdown/core'
+import { EditorView, Plugin, PluginKey, selectParentNode } from '@milkdown/prose'
+import { createPlugin } from '@milkdown/utils'
+
+import { MenuConfig, menuConfig } from './config'
+import { Manager } from './manager'
+import { HandleDOM, MenuBar } from './menuBar'
+
+export type Options = {
+  config: MenuConfig
+  domHandler: HandleDOM
+}
+
+export { menuConfig } from './config'
+
+export const menu = createPlugin<string, Options>((utils, options) => {
+  const config = options?.config ?? menuConfig
+  const domHandler = options?.domHandler
+
+  let restoreDOM: (() => void) | null = null
+  let menu: HTMLDivElement | null = null
+  let manager: Manager | null = null
+
+  const SelectParent = createCmdKey()
+
+  const initIfNecessary = (ctx: Ctx, editorView: EditorView) => {
+    if (!menu) {
+      const [_menu, _restoreDOM] = MenuBar(utils, editorView, ctx, domHandler)
+      menu = _menu
+      restoreDOM = () => {
+        _restoreDOM()
+        menu = null
+        manager = null
+      }
+    }
+
+    if (!manager) {
+      manager = new Manager(config, utils, ctx, menu, editorView)
+    }
+  }
+
+  return {
+    commands: () => [createCmd(SelectParent, () => selectParentNode)],
+    prosePlugins: (_, ctx) => {
+      const plugin = new Plugin({
+        key: new PluginKey('milkdown-advanced-menu'),
+        view: (editorView) => {
+          initIfNecessary(ctx, editorView)
+          if (editorView.editable) {
+            manager?.update(editorView)
+          }
+          return {
+            update: (view) => manager?.update(view),
+            destroy: () => restoreDOM?.(),
+          }
+        },
+      })
+
+      return [plugin]
+    },
+  }
+})

package/src/components/Milkdown/plugins/advanced-menu/manager.ts

@@ -0,0 +1,122 @@
+/* Copyright 2021, Milkdown by Mirone. */
+
+import { Ctx } from '@milkdown/core'
+import { EditorView } from '@milkdown/prose'
+import { Utils } from '@milkdown/utils'
+
+import { button, ButtonConfig } from './button'
+import { MenuConfig, MenuConfigItem } from './config'
+import { divider, DividerConfig } from './divider'
+import { select, SelectConfig } from './select'
+
+type InnerConfig = (MenuConfigItem | DividerConfig) & { $: HTMLElement }
+
+export class Manager {
+  private config: InnerConfig[]
+
+  constructor(originalConfig: MenuConfig, private utils: Utils, private ctx: Ctx, menu: HTMLElement, view: EditorView) {
+    this.config = originalConfig
+      .map((xs) =>
+        xs.map((x) => ({
+          ...x,
+          $: this.$create(x, view),
+        })),
+      )
+      .map((xs, i): Array<InnerConfig> => {
+        if (i === originalConfig.length - 1) {
+          return xs
+        }
+        const dividerConfig: DividerConfig = {
+          type: 'divider',
+          group: xs.map((x) => x.$),
+        }
+        return [
+          ...xs,
+          {
+            ...dividerConfig,
+            $: this.$create(dividerConfig, view),
+          },
+        ]
+      })
+      .flat()
+
+    this.config.forEach((x) => menu.appendChild(x.$))
+  }
+
+  public update(view: EditorView) {
+    const enabled = view.editable
+
+    this.config.forEach((config) => {
+      switch (config.type) {
+        case 'button': {
+          if (config.active) {
+            const active = config.active(view)
+            if (active) {
+              config.$.classList.add('active')
+            } else {
+              config.$.classList.remove('active')
+            }
+          }
+
+          if (config.alwaysVisible) {
+            config.$.removeAttribute('disabled')
+            return
+          }
+
+          const disabled = !enabled || (config.disabled && config.disabled(view))
+          if (disabled) {
+            config.$.setAttribute('disabled', 'true')
+          } else {
+            config.$.removeAttribute('disabled')
+          }
+          break
+        }
+
+        case 'select': {
+          if (config.alwaysVisible) {
+            config.$.removeAttribute('disabled')
+            return
+          }
+
+          const disabled = !enabled || (config.disabled && config.disabled(view))
+          if (disabled) {
+            config.$.classList.add('disabled')
+            config.$.children[0].setAttribute('disabled', 'true')
+          } else {
+            config.$.classList.remove('disabled')
+            config.$.children[0].removeAttribute('disabled')
+          }
+          break
+        }
+
+        case 'divider': {
+          const disabled = config.group.every((x) => x.getAttribute('disabled') || x.classList.contains('disabled'))
+          if (disabled) {
+            config.$.classList.add('disabled')
+          } else {
+            config.$.classList.remove('disabled')
+          }
+          break
+        }
+      }
+    })
+  }
+
+  private $create(item: ButtonConfig | DividerConfig | SelectConfig, view: EditorView): HTMLElement {
+    const { utils, ctx } = this
+
+    switch (item.type) {
+      case 'button': {
+        return button(utils, item, ctx, view)
+      }
+      case 'select': {
+        return select(utils, item, ctx, view)
+      }
+      case 'divider': {
+        return divider(utils, item)
+      }
+      default:
+        throw new Error()
+    }
+  }
+}

package/src/components/Milkdown/plugins/advanced-menu/menuBar.ts

@@ -0,0 +1,108 @@
+/* Copyright 2021, Milkdown by Mirone. */
+
+import { css } from '@emotion/css'
+import { Ctx, rootCtx } from '@milkdown/core'
+import { EditorView } from '@milkdown/prose'
+import { Utils } from '@milkdown/utils'
+
+export const MenuBar = (utils: Utils, view: EditorView, ctx: Ctx, domHandler: HandleDOM = defaultDOMHandler) => {
+  const menuWrapper = document.createElement('div')
+  menuWrapper.classList.add('milkdown-menu-wrapper')
+  const menu = document.createElement('div')
+  menu.classList.add('milkdown-menu')
+
+  const editorDOM = view.dom as HTMLDivElement
+
+  const editorWrapperStyle = utils.getStyle((themeTool) => {
+    return themeTool.mixin.scrollbar('y')
+  })
+
+  if (editorWrapperStyle) {
+    editorDOM.classList.add(editorWrapperStyle)
+  }
+
+  const menuStyle = utils.getStyle((themeTool) => {
+    const border = themeTool.mixin.border()
+    const scrollbar = themeTool.mixin.scrollbar('x')
+    const style = css`
+      box-sizing: border-box;
+      width: 100%;
+      display: flex;
+      flex-wrap: nowrap;
+      overflow-x: auto;
+      ${border};
+      ${scrollbar};
+      background: ${themeTool.palette('surface')};
+      -webkit-overflow-scrolling: auto;
+      .disabled {
+        display: none;
+      }
+    `
+    return style
+  })
+
+  if (menuStyle) {
+    menuStyle.split(' ').forEach((x) => menu.classList.add(x))
+  }
+
+  const root = ctx.get(rootCtx)
+
+  const editorRoot = getRoot(root) as HTMLElement
+  const milkdownDOM = editorDOM.parentElement
+
+  if (!milkdownDOM) {
+    throw new Error('No parent node found')
+  }
+
+  domHandler({
+    menu,
+    menuWrapper,
+    editorDOM,
+    editorRoot,
+    milkdownDOM,
+  })
+
+  const restoreDOM = () => {
+    restore({
+      menu,
+      menuWrapper,
+      editorDOM,
+      editorRoot,
+      milkdownDOM,
+    })
+  }
+
+  return [menu, restoreDOM] as const
+}
+
+export type HandleDOMParams = {
+  menu: HTMLDivElement
+  menuWrapper: HTMLDivElement
+  editorRoot: HTMLElement
+  milkdownDOM: HTMLElement
+  editorDOM: HTMLDivElement
+}
+
+export type HandleDOM = (params: HandleDOMParams) => void
+
+const restore: HandleDOM = ({ milkdownDOM, editorRoot, menu, menuWrapper }) => {
+  editorRoot.appendChild(milkdownDOM)
+  menuWrapper.remove()
+  menu.remove()
+}
+
+const defaultDOMHandler: HandleDOM = ({ menu, menuWrapper, editorRoot, milkdownDOM }) => {
+  menuWrapper.appendChild(menu)
+  editorRoot.replaceChild(menuWrapper, milkdownDOM)
+  menuWrapper.appendChild(milkdownDOM)
+}
+
+const getRoot = (root: string | Node | null | undefined) => {
+  if (!root) return document.body
+  if (typeof root === 'string') {
+    const el = document.querySelector(root)
+    if (el) return el
+    return document.body
+  }
+  return root
+}

package/src/components/Milkdown/plugins/advanced-menu/select.ts

@@ -0,0 +1,163 @@
+/* Copyright 2021, Milkdown by Mirone. */
+
+import { css } from '@emotion/css'
+import { CmdKey, commandsCtx, Ctx } from '@milkdown/core'
+import { EditorView } from '@milkdown/prose'
+import { Utils } from '@milkdown/utils'
+
+import type { MenuCommonConfig } from './config'
+
+type SelectOptions = {
+  id: string
+  text: string
+}
+
+export type SelectConfig<T = any> = {
+  type: 'select'
+  text: string
+  options: SelectOptions[]
+  active?: (view: EditorView) => string
+  onSelect: (id: string, view: EditorView) => [key: CmdKey<T>, info?: T]
+  alwaysVisible: boolean
+} & MenuCommonConfig
+
+export const select = (utils: Utils, config: SelectConfig, ctx: Ctx, view: EditorView) => {
+  const selectStyle = utils.getStyle((themeTool) => {
+    return css`
+      flex-shrink: 0;
+      font-weight: 500;
+      font-size: 0.875rem;
+      ${themeTool.mixin.border('right')};
+      ${themeTool.mixin.border('left')};
+      .menu-selector {
+        border: 0;
+        box-sizing: unset;
+        cursor: pointer;
+        font: inherit;
+        text-align: left;
+        justify-content: space-between;
+        align-items: center;
+        color: ${themeTool.palette('neutral', 0.87)};
+        display: flex;
+        padding: 0.25rem 0.5rem;
+        margin: 0.5rem;
+        background: ${themeTool.palette('secondary', 0.12)};
+        width: 10.375rem;
+        &:disabled {
+          display: none;
+        }
+      }
+      .menu-selector-value {
+        flex: 1;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+      .menu-selector-list {
+        width: calc(12.375rem);
+        position: absolute;
+        top: 3rem;
+        background: ${themeTool.palette('surface')};
+        ${themeTool.mixin.border()};
+        ${themeTool.mixin.shadow()};
+        border-bottom-left-radius: ${themeTool.size.radius};
+        border-bottom-right-radius: ${themeTool.size.radius};
+        z-index: 3;
+      }
+      .menu-selector-list-item {
+        background-color: transparent;
+        border: 0;
+        cursor: pointer;
+        display: block;
+        font: inherit;
+        text-align: left;
+        padding: 0.75rem 1rem;
+        line-height: 1.5rem;
+        width: 100%;
+        color: ${themeTool.palette('neutral', 0.87)};
+        &:hover {
+          background: ${themeTool.palette('secondary', 0.12)};
+          color: ${themeTool.palette('primary')};
+        }
+      }
+      &.fold {
+        border-color: transparent;
+        .menu-selector {
+          background: unset;
+        }
+        .menu-selector-list {
+          display: none;
+        }
+      }
+    `
+  })
+
+  const selectorWrapper = document.createElement('div')
+  selectorWrapper.classList.add('menu-selector-wrapper', 'fold')
+
+  const selector = document.createElement('button')
+  selector.setAttribute('type', 'button')
+  selector.classList.add('menu-selector', 'fold')
+  selector.addEventListener('mousedown', (e) => {
+    e.preventDefault()
+    e.stopPropagation()
+    selectorWrapper.classList.toggle('fold')
+    selectorList.style.left = `${
+      selectorWrapper.getBoundingClientRect().left - view.dom.getBoundingClientRect().left
+    }px`
+  })
+  view.dom.addEventListener('click', () => {
+    selectorWrapper.classList.add('fold')
+  })
+
+  const selectorValue = document.createElement('span')
+  selectorValue.classList.add('menu-selector-value')
+  selectorValue.textContent = config.text
+
+  const selectorButton = utils.themeTool.slots.icon('downArrow')
+  selectorButton.setAttribute('aria-hidden', 'true')
+
+  selectorWrapper.appendChild(selector)
+  selector.appendChild(selectorValue)
+  selector.appendChild(selectorButton)
+
+  const selectorList = document.createElement('div')
+  selectorList.classList.add('menu-selector-list')
+  config.options.forEach((option) => {
+    const selectorListItem = document.createElement('button')
+    selectorListItem.setAttribute('type', 'button')
+    selectorListItem.dataset.id = option.id
+    selectorListItem.textContent = option.text
+    selectorListItem.classList.add('menu-selector-list-item')
+    selectorList.appendChild(selectorListItem)
+  })
+
+  selectorList.addEventListener('mousedown', (e) => {
+    const { target } = e
+    if (target instanceof HTMLButtonElement && target.dataset.id) {
+      ctx.get(commandsCtx).call(...config.onSelect(target.dataset.id, view))
+      selectorWrapper.classList.add('fold')
+    }
+  })
+
+  selectorWrapper.appendChild(selectorList)
+
+  if (selectStyle) {
+    selectorWrapper.classList.add(selectStyle)
+  }
+
+  if (config.alwaysVisible) {
+    selector.removeAttribute('disabled')
+    return selectorWrapper
+  }
+
+  const disabled = !view.editable || (config.disabled && config.disabled(view))
+  if (disabled) {
+    selector.classList.add('disabled')
+    selector.children[0].setAttribute('disabled', 'true')
+  } else {
+    selector.classList.remove('disabled')
+    selector.children[0].removeAttribute('disabled')
+  }
+
+  return selectorWrapper
+}