@standardnotes/markdown-visual 1.0.7 → 1.3.0

package/src/components/Milkdown/styles.scss

@@ -0,0 +1,209 @@
+.container {
+  .milkdown-container {
+    margin: 0 auto;
+    width: 100%;
+    max-width: 100%;
+    height: 100%;
+    max-height: 100%;
+    flex-grow: 1;
+    justify-content: flex-start;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    padding: 0;
+    box-sizing: border-box;
+
+    > div {
+      height: 100%;
+    }
+
+    .milkdown-menu-wrapper {
+      position: relative;
+      overflow: auto;
+      height: 100%;
+
+      .milkdown-menu {
+        top: 0;
+        z-index: 1;
+        left: 0;
+        right: 0;
+        box-sizing: border-box;
+        width: 100%;
+        display: flex;
+        flex-wrap: nowrap;
+        overflow-x: auto;
+        border: none;
+        background: rgba(var(--surface), 1);
+        background-color: var(--sn-stylekit-contrast-background-color);
+        border-color: var(--sn-stylekit-border-color);
+        position: absolute;
+
+        .button {
+          background-color: var(--sn-stylekit-secondary-background-color);
+          color: var(--sn-stylekit-neutral-color);
+          -webkit-transition: none;
+          transition: none;
+        }
+
+        .button.active {
+          background-color: var(--sn-stylekit-neutral-color) !important;
+          color: var(--sn-stylekit-neutral-contrast-color) !important;
+        }
+
+        .divider {
+          background-color: var(--sn-stylekit-border-color) !important;
+        }
+      }
+
+      .milkdown {
+        max-width: 100%;
+        height: 100%;
+        box-shadow: none !important;
+        background-color: var(--sn-stylekit-background-color) !important;
+        color: var(--sn-stylekit-editor-foreground-color) !important;
+        overflow: auto;
+
+        &::-webkit-scrollbar-thumb {
+          background-color: var(--sn-stylekit-scrollbar-thumb-color);
+          border: 2px solid transparent;
+        }
+
+        &::-webkit-scrollbar-thumb:hover {
+          background-color: var(--sn-stylekit-scrollbar-thumb-color);
+        }
+
+        .emoji {
+          height: 1.3rem !important;
+          width: 1.3rem !important;
+        }
+
+        .editor {
+          padding-top: 4.125rem !important;
+          padding-left: 1.25rem !important;
+          padding-right: 1.25rem !important;
+          padding-bottom: 0 !important;
+          max-width: 100% !important;
+
+          > * {
+            margin-top: 0 !important;
+            margin-bottom: 0.875rem !important;
+          }
+
+          h1.heading.h1 {
+            font-size: 2.8rem !important;
+          }
+
+          h2.heading.h2 {
+            font-size: 2.3rem !important;
+          }
+
+          h3.heading.h3 {
+            font-size: 1.8rem !important;
+          }
+
+          h4.heading.h4 {
+            font-size: 1.5rem !important;
+          }
+
+          h5.heading.h5 {
+            font-size: 1rem !important;
+          }
+
+          p.paragraph {
+            font-size: var(--sn-stylekit-font-size-editor) !important;
+          }
+
+          .strike-through {
+            text-decoration-color: rgba(var(--sn-stylekit-editor-foreground-color), 0.5);
+          }
+
+          .ProseMirror-gapcursor {
+            caret-color: transparent;
+          }
+
+          .tableWrapper table {
+            border-color: var(--sn-stylekit-border-color);
+
+            th {
+              color: var(--sn-stylekit-neutral-contrast-color);
+              border: var(--lineWidth) solid var(--sn-stylekit-border-color);
+              background-color: var(--sn-stylekit-neutral-color) !important;
+              background-clip: padding-box;
+            }
+
+            td {
+              color: var(--sn-stylekit-paragraph-text-color);
+              border: var(--lineWidth) solid var(--sn-stylekit-border-color);
+              background: inherit;
+            }
+          }
+
+          .image,
+          .system,
+          .empty {
+            background-color: var(--sn-stylekit-secondary-contrast-background-color);
+          }
+
+          .empty .placeholder::before {
+            color: var(--sn-stylekit-foreground-color);
+          }
+
+          .code-inline {
+            color: var(--sn-stylekit-background-color);
+            background-color: var(--sn-stylekit-foreground-color);
+          }
+        }
+
+        .slash-dropdown {
+          background-color: var(--sn-stylekit-contrast-background-color) !important;
+          border-color: var(--sn-stylekit-border-color) !important;
+
+          .slash-dropdown-item {
+            color: var(--sn-stylekit-paragraph-text-color) !important;
+
+            .icon {
+              color: var(--sn-stylekit-paragraph-text-color) !important;
+            }
+          }
+        }
+
+        .milkdown-emoji-filter {
+          background-color: var(--sn-stylekit-contrast-background-color) !important;
+          border-color: var(--sn-stylekit-border-color) !important;
+          color: var(--sn-stylekit-paragraph-text-color) !important;
+        }
+
+        .tooltip {
+          background-color: var(--sn-stylekit-contrast-background-color) !important;
+          border-color: var(--sn-stylekit-border-color) !important;
+
+          .icon {
+            color: var(--sn-stylekit-paragraph-text-color) !important;
+          }
+
+          .icon:not(:last-child)::after {
+            width: 0 !important;
+            right: 0 !important;
+          }
+        }
+
+        .tooltip-input {
+          background-color: var(--sn-stylekit-contrast-background-color) !important;
+          border-color: var(--sn-stylekit-border-color) !important;
+
+          button {
+            color: var(--sn-stylekit-success-color) !important;
+          }
+
+          input {
+            color: var(--sn-stylekit-paragraph-text-color) !important;
+          }
+
+          input::placeholder {
+            color: var(--sn-stylekit-neutral-color) !important;
+          }
+        }
+      }
+    }
+  }
+}

package/src/components/SplitView/index.tsx

@@ -0,0 +1,42 @@
+import './styles.scss'
+
+import PropTypes, { InferProps } from 'prop-types'
+import { memo } from 'react'
+
+export const enum SplitViewDirection {
+  Horizontal = 'horizontal',
+  Vertical = 'vertical',
+}
+
+const enum SplitViewType {
+  Row = 'row',
+  Column = 'column',
+}
+
+const propTypes = {
+  split: PropTypes.bool.isRequired,
+  direction: PropTypes.oneOf([SplitViewDirection.Horizontal, SplitViewDirection.Vertical]).isRequired,
+  children: PropTypes.arrayOf(PropTypes.element).isRequired,
+}
+
+type SplitViewProps = InferProps<typeof propTypes>
+
+const SplitView: React.FC<SplitViewProps> = ({ children, split, direction }) => {
+  const childClassName = direction === SplitViewDirection.Horizontal ? SplitViewType.Column : SplitViewType.Row
+
+  return (
+    <div className={`container ${direction}`}>
+      <div className={`${childClassName} ${split ? 'half' : 'full'}`}>{children[0]}</div>
+      {split && (
+        <>
+          <div className="separator" />
+          <div className={`${childClassName} half`}>{children[1]}</div>
+        </>
+      )}
+    </div>
+  )
+}
+
+SplitView.propTypes = propTypes
+
+export default memo(SplitView)

package/src/components/SplitView/styles.scss

@@ -0,0 +1,51 @@
+.container > .separator {
+  background-color: var(--sn-stylekit-border-color);
+}
+
+.container.horizontal {
+  flex-direction: row;
+  overflow-x: clip;
+
+  .column {
+    flex: 1;
+  }
+
+  .column.full {
+    max-width: 100%;
+  }
+
+  .column.half {
+    max-width: 50%;
+  }
+
+  .separator {
+    width: 10px;
+  }
+
+  .column.half:last-child {
+    max-width: 50%;
+  }
+}
+
+.container.vertical {
+  flex-direction: column;
+  overflow-y: clip;
+
+  $separator-height: 1%;
+
+  .row.full {
+    height: 100%;
+  }
+
+  .row.half {
+    height: 40%;
+  }
+
+  .separator {
+    height: $separator-height;
+  }
+
+  .row.half:last-child {
+    height: 60% - $separator-height;
+  }
+}

package/src/index.tsx

@@ -0,0 +1,215 @@
+import './stylesheets/main.scss'
+
+import { Component, createRef, StrictMode } from 'react'
+import ReactDOM from 'react-dom'
+
+import CodeMirrorEditor, { CodeMirrorRef } from './components/CodeMirror'
+import MilkdownEditor, { MilkdownRef } from './components/Milkdown'
+import SplitView, { SplitViewDirection } from './components/SplitView'
+
+import EditorKit, { EditorKitDelegate } from '@standardnotes/editor-kit'
+import { marked } from 'marked'
+
+import { MenuConfig, menuConfig } from './components/Milkdown/plugins/advanced-menu/config'
+
+enum TextChangeSource {
+  Milkdown = 'milkdown',
+  CodeMirror = 'codemirror',
+}
+
+type AppProps = {}
+type AppState = {
+  splitView: boolean
+  editable: boolean
+  spellcheck: boolean
+  isLoading: boolean
+}
+
+class AppWrapper extends Component<AppProps, AppState> {
+  private editorKit?: EditorKit
+  private prevText: string = ''
+
+  private milkdownRef = createRef<MilkdownRef>()
+  private codeMirrorRef = createRef<CodeMirrorRef>()
+
+  constructor(props: AppProps) {
+    super(props)
+
+    this.state = {
+      splitView: false,
+      editable: true,
+      spellcheck: true,
+      isLoading: true,
+    }
+  }
+
+  componentDidMount() {
+    this.configureEditorKit()
+  }
+
+  private configureEditorKit() {
+    const editorKitDelegate: EditorKitDelegate = {
+      setEditorRawText: (text: string) => {
+        this.prevText = text.trim()
+
+        this.updateMilkdownText(this.prevText)
+        this.updateCodeMirrorText(this.prevText)
+
+        this.setState({
+          isLoading: false,
+        })
+      },
+      generateCustomPreview: (text: string) => {
+        const htmlPreview = marked.parse(text)
+        const tmpElement = document.createElement('div')
+        tmpElement.innerHTML = htmlPreview
+
+        const preview = tmpElement.textContent || tmpElement.innerText || ''
+
+        return {
+          plain: this.truncateString(preview).trim(),
+        }
+      },
+      onNoteValueChange: async (note: any) => {
+        const editable = !note.content.appData?.['org.standardnotes.sn']?.locked ?? true
+        const spellcheck = note.content.spellcheck
+
+        this.setState({
+          editable,
+          spellcheck,
+        })
+      },
+      onNoteLockToggle: (locked: boolean) => {
+        const editable = !locked
+
+        this.setState({
+          editable,
+        })
+      },
+      handleRequestForContentHeight: () => {
+        let height = 0
+        height += document.querySelector('.ProseMirror')?.clientHeight ?? 0
+        height += document.querySelector('.milkdown-menu')?.clientHeight ?? 0
+        return height
+      },
+    }
+
+    this.editorKit = new EditorKit(editorKitDelegate, {
+      mode: 'markdown',
+    })
+  }
+
+  private updateMilkdownText(text: string) {
+    const { current } = this.milkdownRef
+    if (current) {
+      current.update(text)
+    }
+  }
+
+  private updateCodeMirrorText(text: string) {
+    const { current } = this.codeMirrorRef
+    if (current) {
+      current.update(text)
+    }
+  }
+
+  private onTextChange = (text: string, source = TextChangeSource.Milkdown) => {
+    if (this.prevText === text.trim()) {
+      return
+    }
+
+    this.prevText = text.trim()
+    this.editorKit!.onEditorValueChanged(text)
+
+    /**
+     * Bi-directional text update:
+     *
+     * - Codemirror <- Milkdown
+     * - Milkdown -> Codemirror
+     */
+    switch (source) {
+      case TextChangeSource.CodeMirror:
+        this.updateMilkdownText(this.prevText)
+        break
+      case TextChangeSource.Milkdown:
+      default:
+        this.updateCodeMirrorText(this.prevText)
+        break
+    }
+  }
+
+  private toggleSplitView = () => {
+    const { splitView } = this.state
+
+    this.setState({
+      splitView: !splitView,
+    })
+  }
+
+  private getSplitViewDirection = (environment: string): SplitViewDirection => {
+    const environmentDirectionMap: Record<string, SplitViewDirection> = {
+      web: SplitViewDirection.Horizontal,
+      desktop: SplitViewDirection.Horizontal,
+      mobile: SplitViewDirection.Vertical,
+    }
+    return environmentDirectionMap[environment]
+  }
+
+  private truncateString(text: string, limit = 90) {
+    if (text.length <= limit) {
+      return text
+    }
+    return text.substring(0, limit) + '...'
+  }
+
+  render() {
+    const { splitView, editable, spellcheck, isLoading } = this.state
+
+    if (isLoading) {
+      return null
+    }
+
+    const environment = this.editorKit?.environment ?? 'web'
+    const splitViewDirection = this.getSplitViewDirection(environment)
+
+    const customMenu: MenuConfig = [
+      ...menuConfig,
+      [
+        {
+          type: 'button',
+          icon: 'code',
+          active: () => splitView,
+          callback: this.toggleSplitView,
+          alwaysVisible: true,
+        },
+      ],
+    ]
+
+    return (
+      <SplitView split={splitView} direction={splitViewDirection}>
+        <MilkdownEditor
+          ref={this.milkdownRef}
+          onChange={this.onTextChange}
+          value={this.prevText}
+          menuConfig={customMenu}
+          editable={editable}
+          spellcheck={spellcheck}
+        />
+        <CodeMirrorEditor
+          ref={this.codeMirrorRef}
+          onChange={(text) => this.onTextChange(text, TextChangeSource.CodeMirror)}
+          value={this.prevText}
+          editable={editable}
+          spellcheck={spellcheck}
+        />
+      </SplitView>
+    )
+  }
+}
+
+ReactDOM.render(
+  <StrictMode>
+    <AppWrapper />
+  </StrictMode>,
+  document.getElementById('root'),
+)

package/src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

package/src/setupTests.ts

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom'

package/src/stylesheets/main.scss

@@ -0,0 +1,45 @@
+@import '../../node_modules/@standardnotes/styles/src/Styles/main.scss';
+@import 'material-icons/iconfont/material-icons.css';
+@import 'katex/dist/katex.min.css';
+@import 'prism/material-light.css';
+
+:root {
+  --sn-stylekit-monospace-font: SFMono-Regular, Consolas, Liberation Mono, Menlo, 'Ubuntu Mono', courier, monospace;
+}
+
+body,
+html {
+  background-color: var(--sn-stylekit-secondary-background-color);
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+}
+
+* {
+  // To prevent gray flash when focusing input on mobile Safari
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  font-family: var(--sn-stylekit-sans-serif-font);
+}
+
+#root {
+  height: 100%;
+}
+
+.sn-component {
+  display: flex;
+  flex-direction: column;
+  font-size: var(--sn-stylekit-font-size-editor);
+  min-height: 100vh;
+  @media screen and (max-width: 420px) {
+    min-height: -webkit-fill-available;
+  }
+}
+
+.container {
+  flex: 1;
+  flex-grow: 1;
+  display: flex;
+  width: 100%;
+  height: 100%;
+}