@standardnotes/markdown-visual 1.0.7 → 1.3.0

package/CHANGELOG.md

@@ -0,0 +1,108 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# [1.3.0](https://github.com/standardnotes/plugins/compare/@standardnotes/markdown-visual@1.2.3...@standardnotes/markdown-visual@1.3.0) (2023-01-20)
+
+### Features
+
+* designate markdown visual as community ([25c2b06](https://github.com/standardnotes/plugins/commit/25c2b0691c56c0eb96d5c2989ff2a9362dac37c2))
+
+## [1.2.3](https://github.com/standardnotes/plugins/compare/@standardnotes/markdown-visual@1.2.2...@standardnotes/markdown-visual@1.2.3) (2022-11-04)
+
+**Note:** Version bump only for package @standardnotes/markdown-visual
+
+## [1.2.2](https://github.com/standardnotes/plugins/compare/@standardnotes/markdown-visual@1.2.1...@standardnotes/markdown-visual@1.2.2) (2022-11-04)
+
+**Note:** Version bump only for package @standardnotes/markdown-visual
+
+## [1.2.1](https://github.com/standardnotes/plugins/compare/@standardnotes/markdown-visual@1.2.0...@standardnotes/markdown-visual@1.2.1) (2022-11-04)
+
+**Note:** Version bump only for package @standardnotes/markdown-visual
+
+# 1.2.0 (2022-11-04)
+
+### Features
+
+* add core plugins ([b607787](https://github.com/standardnotes/plugins/commit/b60778762306f5647cb715102eab23083b266718))
+
+## [1.1.5](https://github.com/standardnotes/app/compare/@standardnotes/markdown-visual@1.1.4...@standardnotes/markdown-visual@1.1.5) (2022-11-01)
+
+**Note:** Version bump only for package @standardnotes/markdown-visual
+
+## [1.1.4](https://github.com/standardnotes/app/compare/@standardnotes/markdown-visual@1.1.3...@standardnotes/markdown-visual@1.1.4) (2022-10-27)
+
+**Note:** Version bump only for package @standardnotes/markdown-visual
+
+## [1.1.3](https://github.com/standardnotes/app/compare/@standardnotes/markdown-visual@1.1.2...@standardnotes/markdown-visual@1.1.3) (2022-10-05)
+
+**Note:** Version bump only for package @standardnotes/markdown-visual
+
+## [1.1.2](https://github.com/standardnotes/app/compare/@standardnotes/markdown-visual@1.1.1...@standardnotes/markdown-visual@1.1.2) (2022-07-13)
+
+### Bug Fixes
+
+* upgrade jest with types to latest version ([09e08ca](https://github.com/standardnotes/app/commit/09e08ca899ba8694cf43292e918c4c204c0d2cb9))
+
+## [1.1.1](https://github.com/standardnotes/app/compare/@standardnotes/markdown-visual@1.1.0...@standardnotes/markdown-visual@1.1.1) (2022-06-30)
+
+**Note:** Version bump only for package @standardnotes/markdown-visual
+
+# [1.1.0](https://github.com/standardnotes/app/compare/@standardnotes/markdown-visual@1.0.12...@standardnotes/markdown-visual@1.1.0) (2022-06-29)
+
+### Features
+
+* deprecated editors ([#1166](https://github.com/standardnotes/app/issues/1166)) ([60ca415](https://github.com/standardnotes/app/commit/60ca4150446f9a14bb6a31416686c6d07a7d0cd9))
+
+## [1.0.12](https://github.com/standardnotes/app/compare/@standardnotes/markdown-visual@1.0.12-alpha.0...@standardnotes/markdown-visual@1.0.12) (2022-06-23)
+
+**Note:** Version bump only for package @standardnotes/markdown-visual
+
+## [1.0.12-alpha.0](https://github.com/standardnotes/app/compare/@standardnotes/markdown-visual@1.0.11...@standardnotes/markdown-visual@1.0.12-alpha.0) (2022-06-23)
+
+**Note:** Version bump only for package @standardnotes/markdown-visual
+
+## [1.0.11](https://github.com/standardnotes/app/compare/@standardnotes/markdown-visual@1.0.11-alpha.1...@standardnotes/markdown-visual@1.0.11) (2022-06-22)
+
+**Note:** Version bump only for package @standardnotes/markdown-visual
+
+## [1.0.11-alpha.1](https://github.com/standardnotes/app/compare/@standardnotes/markdown-visual@1.0.11-alpha.0...@standardnotes/markdown-visual@1.0.11-alpha.1) (2022-06-22)
+
+### Bug Fixes
+
+* components scripts ([#1136](https://github.com/standardnotes/app/issues/1136)) ([e80b4d0](https://github.com/standardnotes/app/commit/e80b4d0ffad495c758b593c30e1c4c754dda9b7e))
+
+## [1.0.11-alpha.0](https://github.com/standardnotes/app/compare/@standardnotes/markdown-visual@1.0.10...@standardnotes/markdown-visual@1.0.11-alpha.0) (2022-06-21)
+
+### Bug Fixes
+
+* markdown visual font size ([#1127](https://github.com/standardnotes/app/issues/1127)) ([f4b9b5b](https://github.com/standardnotes/app/commit/f4b9b5b566e8d4104de71a87ee041cdc77c3ce6c))
+
+## 1.0.10 (2022-06-16)
+
+**Note:** Version bump only for package @standardnotes/markdown-visual
+
+## 1.0.9 (2022-06-16)
+
+**Note:** Version bump only for package @standardnotes/markdown-visual
+
+## [1.0.8](https://github.com/standardnotes/app/compare/@standardnotes/markdown-visual@1.0.8-alpha.3...@standardnotes/markdown-visual@1.0.8) (2022-06-16)
+
+**Note:** Version bump only for package @standardnotes/markdown-visual
+
+## [1.0.8-alpha.3](https://github.com/standardnotes/app/compare/@standardnotes/markdown-visual@1.0.8-alpha.2...@standardnotes/markdown-visual@1.0.8-alpha.3) (2022-06-16)
+
+**Note:** Version bump only for package @standardnotes/markdown-visual
+
+## 1.0.8-alpha.2 (2022-06-16)
+
+**Note:** Version bump only for package @standardnotes/markdown-visual
+
+## 1.0.8-alpha.1 (2022-06-16)
+
+**Note:** Version bump only for package @standardnotes/markdown-visual
+
+## 1.0.8-alpha.0 (2022-06-15)
+
+**Note:** Version bump only for package @standardnotes/markdown-visual

package/config-overrides.js

@@ -0,0 +1,2 @@
+const override = require('../cra-app.override')
+module.exports = override

package/package.json

@@ -1,84 +1,80 @@
 {
   "name": "@standardnotes/markdown-visual",
-  "version": "1.0.7",
-  "author": "Johnny Almonte <johnny@standardnotes.com>",
+  "version": "1.3.0",
+  "author": "Standard Notes.",
   "description": "A lightweight WYSIWYG markdown editor for Standard Notes, derived from Milkdown.",
   "keywords": [
     "Standard Notes",
     "Standard Notes Extensions"
   ],
-  "license": "AGPL-3.0-or-later",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/standardnotes/markdown-visual.git"
-  },
-  "bugs": {
-    "url": "https://github.com/standardnotes/markdown-visual/issues"
-  },
   "sn": {
-    "main": "build/index.html"
+    "name": "Markdown Visual",
+    "content_type": "SN|Component",
+    "main": "build/index.html",
+    "area": "editor-editor",
+    "spellcheckControl": true,
+    "note_type": "markdown",
+    "file_type": "txt"
   },
   "publishConfig": {
-    "access": "public",
-    "registry": "https://registry.npmjs.org/"
+    "access": "public"
   },
   "homepage": ".",
   "scripts": {
     "analyze": "source-map-explorer 'build/static/js/*.js'",
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
+    "start": "react-app-rewired start",
+    "build": "react-app-rewired build",
     "eject": "react-scripts eject",
-    "pretty": "prettier --write 'src/**/*.{html,css,scss,js,jsx,ts,tsx,json}' README.md",
-    "prepare": "husky install",
-    "prepublishOnly": "npm run build"
+    "format": "prettier --write 'src/**/*.{html,css,scss,js,jsx,ts,tsx,json}' README.md",
+    "test": "echo \"Error: no test specified\" && exit 0"
+  },
+  "dependencies": {
+    "@standardnotes/editor-kit": "standardnotes/editor-kit#50ffb15c935a297b082eb00ffd031adc05080d7f",
+    "@standardnotes/styles": "1.6.1"
   },
   "devDependencies": {
     "@codemirror/lang-markdown": "^0.19.6",
-    "@milkdown/core": "^5.5.0",
-    "@milkdown/plugin-clipboard": "^5.5.0",
-    "@milkdown/plugin-cursor": "^5.5.0",
-    "@milkdown/plugin-diagram": "^5.5.0",
-    "@milkdown/plugin-history": "^5.5.0",
-    "@milkdown/plugin-indent": "^5.5.0",
-    "@milkdown/plugin-listener": "^5.5.0",
-    "@milkdown/plugin-math": "^5.5.0",
-    "@milkdown/plugin-menu": "^5.5.0",
-    "@milkdown/plugin-prism": "^5.5.0",
-    "@milkdown/plugin-slash": "^5.5.0",
-    "@milkdown/plugin-tooltip": "^5.5.0",
-    "@milkdown/preset-commonmark": "^5.5.0",
-    "@milkdown/preset-gfm": "^5.5.0",
-    "@milkdown/prose": "^5.5.0",
-    "@milkdown/react": "^5.5.0",
-    "@milkdown/theme-nord": "^5.5.0",
-    "@standardnotes/editor-kit": "2.2.4",
+    "@milkdown/core": "5.5.0",
+    "@milkdown/plugin-clipboard": "5.5.0",
+    "@milkdown/plugin-cursor": "5.5.0",
+    "@milkdown/plugin-diagram": "5.5.0",
+    "@milkdown/plugin-history": "5.5.0",
+    "@milkdown/plugin-indent": "5.5.0",
+    "@milkdown/plugin-listener": "5.5.0",
+    "@milkdown/plugin-math": "5.5.0",
+    "@milkdown/plugin-menu": "5.5.0",
+    "@milkdown/plugin-prism": "5.5.0",
+    "@milkdown/plugin-slash": "5.5.0",
+    "@milkdown/plugin-tooltip": "5.5.0",
+    "@milkdown/preset-commonmark": "5.5.0",
+    "@milkdown/preset-gfm": "5.5.0",
+    "@milkdown/prose": "5.5.0",
+    "@milkdown/react": "5.5.0",
+    "@milkdown/theme-nord": "5.5.0",
     "@testing-library/dom": "^8.11.3",
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.4",
     "@testing-library/user-event": "^13.5.0",
-    "@types/jest": "^27.4.1",
+    "@types/jest": "^28.1.5",
     "@types/lodash": "^4.14.179",
     "@types/marked": "^4.0.2",
     "@types/node": "^17.0.21",
     "@types/react": "^17.0.40",
     "@types/react-dom": "^17.0.13",
-    "@uiw/react-codemirror": "^4.5.1",
-    "gh-pages": "^3.2.3",
-    "husky": "^7.0.4",
+    "@uiw/react-codemirror": "4.5.1",
     "katex": "^0.15.2",
-    "lint-staged": "^12.3.5",
+    "lint-staged": "*",
     "marked": "^4.0.12",
     "material-icons": "^1.10.8",
-    "prettier": "^2.5.1",
+    "prettier": "*",
     "react": "^17.0.2",
+    "react-app-rewired": "^2.2.1",
     "react-dom": "^17.0.2",
     "react-icons": "^4.3.1",
     "react-scripts": "^5.0.0",
-    "sass": "1.49.9",
-    "sn-stylekit": "5.2.21",
+    "sass": "*",
     "source-map-explorer": "^2.5.2",
-    "typescript": "4.6.2"
+    "typescript": "*"
   },
   "eslintConfig": {
     "extends": [
@@ -106,7 +102,5 @@
       "prettier --write"
     ]
   },
-  "resolutions": {
-    "react-error-overlay": "^6.0.10"
-  }
+  "gitHead": "952d7103d2d1b68a46435daab1bec5b35a2d3497"
 }

package/public/index.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta name="description" content="A lightweight WYSIWYG markdown editor, derivated from Milkdown editor" />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>Markdown Visual</title>
+  </head>
+
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>

package/public/sample.ext.json

@@ -0,0 +1,15 @@
+{
+  "name": "Markdown Visual - Dev",
+  "note_type": "markdown",
+  "file_type": "md",
+  "interchangeable": false,
+  "spellcheckControl": true,
+  "identifier": "org.standardnotes.markdown-visual-dev",
+  "content_type": "SN|Component",
+  "area": "editor-editor",
+  "version": "1.0.0",
+  "description": "A lightweight WYSIWYG markdown editor, derivated from Milkdown editor",
+  "url": "http://localhost:8001/",
+  "marketing_url": "",
+  "flags": ["New"]
+}

package/src/components/CodeMirror/index.tsx

@@ -0,0 +1,94 @@
+import './styles.scss'
+
+import { basicSetup } from '@codemirror/basic-setup'
+import { markdown } from '@codemirror/lang-markdown'
+import CodeMirrorReact, { EditorView, ReactCodeMirrorRef } from '@uiw/react-codemirror'
+import { forwardRef, useImperativeHandle, useRef, useState } from 'react'
+
+export type CodeMirrorRef = {
+  update: (markdown: string) => void
+}
+
+type CodeMirrorProps = {
+  onChange: (text: string) => void
+  value?: string
+  editable: boolean
+  spellcheck: boolean
+}
+
+const CodeMirror = (
+  { onChange, value, editable, spellcheck }: CodeMirrorProps,
+  ref: React.ForwardedRef<CodeMirrorRef>,
+) => {
+  const [hasFocus, setFocus] = useState(false)
+  const editorRef = useRef<ReactCodeMirrorRef>(null)
+  const extensions = [
+    basicSetup,
+    markdown(),
+    EditorView.lineWrapping,
+    EditorView.updateListener.of((update) => {
+      if (update.focusChanged) {
+        setFocus(update.view.hasFocus)
+      }
+
+      if (update.docChanged) {
+        const text = update.state.doc.toString()
+        onChange(text)
+      }
+    }),
+  ]
+
+  useImperativeHandle(ref, () => ({
+    update: (markdown: string) => {
+      /**
+       * This will prevent the CodeMirror editor from being updated again when an update
+       * is sent back from the Milkdown editor.
+       */
+      if (hasFocus) {
+        return
+      }
+
+      if (!editable || !editorRef.current) {
+        return
+      }
+
+      const view = editorRef.current.view
+      if (!view) {
+        return
+      }
+
+      const { state } = view
+      if (!state) {
+        return
+      }
+
+      const document = state.doc
+      if (!document) {
+        return
+      }
+
+      view.dispatch({
+        changes: {
+          from: 0,
+          to: document.toString().length,
+          insert: markdown,
+        },
+      })
+    },
+  }))
+
+  return (
+    <div className="codemirror-container">
+      <CodeMirrorReact
+        ref={editorRef}
+        extensions={extensions}
+        value={value}
+        editable={editable}
+        spellCheck={spellcheck}
+        indentWithTab
+      />
+    </div>
+  )
+}
+
+export default forwardRef<CodeMirrorRef, CodeMirrorProps>(CodeMirror)

package/src/components/CodeMirror/styles.scss

@@ -0,0 +1,55 @@
+.container {
+  .codemirror-container {
+    overflow-y: auto;
+    max-height: 100%;
+
+    .cm-theme-light {
+      .cm-editor {
+        background-color: var(--sn-stylekit-editor-background-color) !important;
+        color: var(--sn-stylekit-editor-foreground-color) !important;
+        font-family: var(--sn-stylekit-monospace-font);
+        -webkit-overflow-scrolling: touch;
+        font-size: calc(var(--sn-stylekit-font-size-editor) - 0.3rem);
+
+        @media only screen and (min-width: 768px) {
+          font-size: calc(var(--sn-stylekit-font-size-editor) - 0.1rem);
+        }
+
+        .cm-content {
+          caret-color: var(--sn-stylekit-editor-foreground-color) !important;
+        }
+
+        .cm-lineNumbers {
+          color: var(--sn-stylekit-neutral-color) !important;
+          opacity: 0.5;
+        }
+
+        .cm-cursor {
+          border-color: var(--sn-stylekit-info-color) !important;
+        }
+
+        .cm-gutters {
+          background-color: var(--sn-stylekit-background-color) !important;
+          color: var(--sn-stylekit-editor-foreground-color) !important;
+          border-color: var(--sn-stylekit-border-color) !important;
+        }
+
+        .ͼb {
+          color: var(--sn-stylekit-info-color) !important;
+        }
+
+        .cm-selectionBackground {
+          background: var(--sn-stylekit-info-color) !important;
+        }
+
+        .cm-activeLine {
+          background-color: var(--sn-stylekit-secondary-contrast-background-color) !important;
+        }
+
+        .cm-activeLineGutter {
+          background-color: var(--sn-stylekit-contrast-background-color) !important;
+        }
+      }
+    }
+  }
+}

package/src/components/Milkdown/editor.ts

@@ -0,0 +1,62 @@
+import { defaultValueCtx, Editor, editorViewOptionsCtx, rootCtx } from '@milkdown/core'
+import { clipboard } from '@milkdown/plugin-clipboard'
+import { cursor } from '@milkdown/plugin-cursor'
+import { diagram } from '@milkdown/plugin-diagram'
+import { history } from '@milkdown/plugin-history'
+import { indent } from '@milkdown/plugin-indent'
+import { listener, listenerCtx } from '@milkdown/plugin-listener'
+import { math } from '@milkdown/plugin-math'
+import { prism } from '@milkdown/plugin-prism'
+import { slash } from '@milkdown/plugin-slash'
+import { tooltip } from '@milkdown/plugin-tooltip'
+import { gfm } from '@milkdown/preset-gfm'
+import { nord } from '@milkdown/theme-nord'
+
+import { menu } from './plugins/advanced-menu'
+import { MenuConfig } from './plugins/advanced-menu/config'
+
+export type CreateEditorParams = {
+  root: HTMLElement | null
+  onChange: (text: string) => void
+  value?: string
+  menuConfig: MenuConfig
+  editable: boolean
+  spellcheck: boolean
+}
+
+export const createEditor = ({ root, onChange, value, menuConfig, editable, spellcheck }: CreateEditorParams) => {
+  const editor = Editor.make()
+    .config((ctx) => {
+      ctx.set(rootCtx, root)
+      value && ctx.set(defaultValueCtx, value)
+
+      ctx.get(listenerCtx).markdownUpdated((_, markdown) => {
+        onChange(markdown)
+      })
+
+      ctx.set(editorViewOptionsCtx, {
+        editable: () => editable,
+      })
+
+      root?.setAttribute('spellcheck', JSON.stringify(spellcheck))
+    })
+    .use(nord)
+    .use(clipboard)
+    .use(gfm)
+    .use(listener)
+    .use(math)
+    .use(indent)
+    .use(prism)
+    .use(slash)
+    .use(tooltip)
+    .use(diagram)
+    .use(cursor)
+    .use(history)
+    .use(
+      menu({
+        config: menuConfig,
+      }),
+    )
+
+  return editor
+}

package/src/components/Milkdown/index.tsx

@@ -0,0 +1,77 @@
+import './styles.scss'
+
+import { editorViewCtx, parserCtx } from '@milkdown/core'
+import { Slice } from '@milkdown/prose'
+import { EditorRef, ReactEditor, useEditor } from '@milkdown/react'
+import { forwardRef, useImperativeHandle, useRef } from 'react'
+
+import { createEditor, CreateEditorParams } from './editor'
+import { MenuConfig } from './plugins/advanced-menu/config'
+
+export type MilkdownRef = {
+  update: (markdown: string) => void
+}
+
+type MilkdownProps = {
+  onChange: CreateEditorParams['onChange']
+  value?: CreateEditorParams['value']
+  menuConfig: MenuConfig
+  editable: CreateEditorParams['editable']
+  spellcheck: CreateEditorParams['spellcheck']
+}
+
+const Milkdown = (
+  { onChange, value, menuConfig, editable, spellcheck }: MilkdownProps,
+  ref: React.ForwardedRef<MilkdownRef>,
+) => {
+  const editorRef = useRef<EditorRef>(null)
+
+  useImperativeHandle(ref, () => ({
+    update: (markdown: string) => {
+      if (!editable || !editorRef.current) {
+        return
+      }
+
+      const editor = editorRef.current.get()
+      if (!editor) {
+        return
+      }
+
+      editor.action((ctx) => {
+        const view = ctx.get(editorViewCtx)
+        const parser = ctx.get(parserCtx)
+        const document = parser(markdown)
+        if (!document) {
+          return
+        }
+
+        const state = view.state
+        view.dispatch(
+          state.tr.replace(0, state.doc.content.size, new Slice(document.content, 0, 0)).setMeta('addToHistory', false),
+        )
+      })
+    },
+  }))
+
+  const editor = useEditor(
+    (root) => {
+      return createEditor({
+        root,
+        onChange,
+        value,
+        menuConfig,
+        editable,
+        spellcheck,
+      })
+    },
+    [value, onChange, value, menuConfig, editable, spellcheck],
+  )
+
+  return (
+    <div className="milkdown-container">
+      <ReactEditor ref={editorRef} editor={editor} />
+    </div>
+  )
+}
+
+export default forwardRef<MilkdownRef, MilkdownProps>(Milkdown)

package/src/components/Milkdown/plugins/advanced-menu/README.md

@@ -0,0 +1,3 @@
+# advanced-menu
+
+An advanced menu plugin for [Milkdown editor](https://saul-mirone.github.io/milkdown/), which is heavily inspired on [@milkdown/plugin-menu](https://github.com/Saul-Mirone/milkdown/tree/main/packages/plugin-menu).