@standardnotes/markdown-visual 1.3.1 → 1.3.2

package/src/components/Milkdown/styles.scss

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

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

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

@@ -1,223 +0,0 @@
-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
-  splitViewDirection: SplitViewDirection
-  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,
-      splitViewDirection: this.getSplitViewDirection(),
-      editable: true,
-      spellcheck: true,
-      isLoading: true,
-    }
-
-    this.handleSplitViewDirectionChange = this.handleSplitViewDirectionChange.bind(this)
-  }
-
-  componentDidMount() {
-    this.configureEditorKit()
-    window.matchMedia('(max-width: 768px)').addEventListener('change', this.handleSplitViewDirectionChange)
-  }
-
-  componentWillUnmount(): void {
-    window.matchMedia('(max-width: 768px)').removeEventListener('change', this.handleSplitViewDirectionChange)
-  }
-
-  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 = (): SplitViewDirection => {
-    const isMobile = window.innerWidth < 768
-    return isMobile ? SplitViewDirection.Vertical : SplitViewDirection.Horizontal
-  }
-
-  private handleSplitViewDirectionChange = (event: MediaQueryListEvent) => {
-    this.setState({
-      splitViewDirection: this.getSplitViewDirection(),
-    })
-  }
-
-  private truncateString(text: string, limit = 90) {
-    if (text.length <= limit) {
-      return text
-    }
-    return text.substring(0, limit) + '...'
-  }
-
-  render() {
-    const { splitView, splitViewDirection, editable, spellcheck, isLoading } = this.state
-
-    if (isLoading) {
-      return null
-    }
-
-    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

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

package/src/setupTests.ts

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

@@ -1,45 +0,0 @@
-@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%;
-}