@standardnotes/markdown-visual 1.3.0 → 1.3.2

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

@@ -1,102 +0,0 @@
-/* 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

@@ -1,94 +0,0 @@
-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

@@ -1,37 +0,0 @@
-/* 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

@@ -1,64 +0,0 @@
-/* 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

@@ -1,122 +0,0 @@
-/* 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

@@ -1,108 +0,0 @@
-/* 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

@@ -1,163 +0,0 @@
-/* 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
-}