@tinacms/app 0.0.24 → 0.0.25

package/appFiles/package.json

@@ -14,6 +14,8 @@
     "webfontloader": "1.6.28",
     "react-is": "17.0.2",
     "react-router-dom": "6.3.0",
-    "styled-components": "5.3.5"
+    "styled-components": "5.3.5",
+    "@monaco-editor/react": "4.4.5",
+    "monaco-editor": "0.31.0"
   }
 }

package/appFiles/src/App.tsx

@@ -11,7 +11,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import TinaCMS, { TinaAdmin, useCMS } from 'tinacms'
+import React, { Suspense } from 'react'
+import TinaCMS, { TinaAdmin, useCMS, MdxFieldPluginExtendible } from 'tinacms'
 import { TinaEditProvider, useEditState } from 'tinacms/dist/edit-state'
 import { Preview } from './preview'
 
@@ -19,9 +20,32 @@ import { Preview } from './preview'
 // @ts-expect-error
 import config from 'TINA_IMPORT'
 
+const RawEditor = React.lazy(() => import('./fields/rich-text'))
+
+const Editor = (props) => {
+  const [rawMode, setRawMode] = React.useState(false)
+  return (
+    <MdxFieldPluginExtendible.Component
+      rawMode={rawMode}
+      setRawMode={setRawMode}
+      {...props}
+      rawEditor={
+        <Suspense fallback={<div>Loading raw editor...</div>}>
+          <RawEditor {...props} setRawMode={setRawMode} rawMode={rawMode} />
+        </Suspense>
+      }
+    />
+  )
+}
+
 const SetPreview = ({ outputFolder }: { outputFolder: string }) => {
   const cms = useCMS()
   cms.flags.set('tina-preview', outputFolder)
+  // Override original 'rich-text' field with one that has raw mode support
+  cms.fields.add({
+    ...MdxFieldPluginExtendible,
+    Component: Editor,
+  })
   return null
 }
 

package/appFiles/src/fields/rich-text/index.tsx

@@ -0,0 +1,15 @@
+/**
+Copyright 2021 Forestry.io Holdings, Inc.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+    http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+import RawEditor from './monaco'
+
+export default RawEditor

package/appFiles/src/fields/rich-text/monaco/error-message.tsx

@@ -0,0 +1,126 @@
+/**
+
+Copyright 2021 Forestry.io Holdings, Inc.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+*/
+import React from 'react'
+import { XCircleIcon } from '@heroicons/react/solid'
+import { Popover, Transition } from '@headlessui/react'
+import { Fragment } from 'react'
+// import { InvalidMarkdownElement } from '@tinacms/mdx/src/parse/plate'
+export type EmptyTextElement = { type: 'text'; text: '' }
+export type PositionItem = {
+  line?: number | null
+  column?: number | null
+  offset?: number | null
+  _index?: number | null
+  _bufferIndex?: number | null
+}
+export type Position = {
+  start: PositionItem
+  end: PositionItem
+}
+export type InvalidMarkdownElement = {
+  type: 'invalid_markdown'
+  value: string
+  message: string
+  position?: Position
+  children: [EmptyTextElement]
+}
+
+type ErrorType = {
+  message: string
+  position?: {
+    startColumn: number
+    endColumn: number
+    startLineNumber: number
+    endLineNumber: number
+  }
+}
+export const buildError = (element: InvalidMarkdownElement): ErrorType => {
+  return {
+    message: element.message,
+    position: element.position && {
+      endColumn: element.position.end.column,
+      startColumn: element.position.start.column,
+      startLineNumber: element.position.start.line,
+      endLineNumber: element.position.end.line,
+    },
+  }
+}
+export const buildErrorMessage = (element: InvalidMarkdownElement): string => {
+  if (!element) {
+    return ''
+  }
+  const errorMessage = buildError(element)
+  const message = errorMessage
+    ? `${errorMessage.message}${
+        errorMessage.position
+          ? ` at line: ${errorMessage.position.startLineNumber}, column: ${errorMessage.position.startColumn}`
+          : ''
+      }`
+    : null
+  return message
+}
+
+export function ErrorMessage({ error }: { error: InvalidMarkdownElement }) {
+  const message = buildErrorMessage(error)
+
+  return (
+    <Popover className="relative">
+      {() => (
+        <>
+          <Popover.Button
+            className={`p-2 shaodw-lg border ${
+              error ? '' : ' opacity-0 hidden '
+            }`}
+          >
+            <span className="sr-only">Errors</span>
+            <XCircleIcon className="h-5 w-5 text-red-400" aria-hidden="true" />
+          </Popover.Button>
+          <Transition
+            as={Fragment}
+            enter="transition ease-out duration-200"
+            enterFrom="opacity-0 translate-y-1"
+            enterTo="opacity-100 translate-y-0"
+            leave="transition ease-in duration-150"
+            leaveFrom="opacity-100 translate-y-0"
+            leaveTo="opacity-0 translate-y-1"
+          >
+            <Popover.Panel className="absolute top-8 w-[300px] -right-3 z-10 mt-3 px-4 sm:px-0">
+              <div className="overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5">
+                <div className="rounded-md bg-red-50 p-4">
+                  <div className="flex">
+                    <div className="flex-shrink-0">
+                      <XCircleIcon
+                        className="h-5 w-5 text-red-400"
+                        aria-hidden="true"
+                      />
+                    </div>
+                    <div className="ml-3">
+                      <h3 className="text-sm font-medium text-red-800 whitespace-pre-wrap">
+                        {message}
+                      </h3>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </Popover.Panel>
+          </Transition>
+        </>
+      )}
+    </Popover>
+  )
+}

package/appFiles/src/fields/rich-text/monaco/index.tsx

@@ -0,0 +1,246 @@
+/**
+
+Copyright 2021 Forestry.io Holdings, Inc.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+*/
+
+import React from 'react'
+import MonacoEditor, { useMonaco, loader } from '@monaco-editor/react'
+/**
+ * MDX is built directly to the app because of how we load dependencies.
+ * Since we drop the package.json in to the end users folder, we can't
+ * easily install the current version of the mdx package in all scenarios
+ * (when we're working in the monorepo, or working with a tagged npm version)
+ */
+import { parseMDX, stringifyMDX } from './mdx'
+import { useDebounce } from './use-debounce'
+import type * as monaco from 'monaco-editor'
+import {
+  buildError,
+  ErrorMessage,
+  InvalidMarkdownElement,
+} from './error-message'
+import { RichTextType } from 'tinacms'
+
+export const uuid = () => {
+  // @ts-ignore
+  return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c) =>
+    (
+      c ^
+      (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))
+    ).toString(16)
+  )
+}
+
+type Monaco = typeof monaco
+
+// 0.33.0 has a bug https://github.com/microsoft/monaco-editor/issues/2947
+loader.config({
+  paths: { vs: 'https://cdn.jsdelivr.net/npm/monaco-editor@0.31.1/min/vs' },
+})
+
+/**
+ * Since monaco lazy-loads we may have a delay from when the block is inserted
+ * to when monaco has intantiated, keep trying to focus on it.
+ *
+ * Will try for 3 seconds before moving on
+ */
+let retryCount = 0
+const retryFocus = (ref) => {
+  if (ref.current) {
+    ref.current.focus()
+  } else {
+    if (retryCount < 30) {
+      setTimeout(() => {
+        retryCount = retryCount + 1
+        retryFocus(ref)
+      }, 100)
+    }
+  }
+}
+
+export const RawEditor = (props: RichTextType) => {
+  const monaco = useMonaco() as Monaco
+  const monacoEditorRef =
+    React.useRef<monaco.editor.IStandaloneCodeEditor>(null)
+  const [height, setHeight] = React.useState(100)
+  const id = React.useMemo(() => uuid(), [])
+  const field = props.field
+  const inputValue = React.useMemo(() => {
+    // @ts-ignore no access to the rich-text type from this package
+    const res = stringifyMDX(props.input.value, field, (value) => value)
+    return typeof props.input.value === 'string' ? props.input.value : res
+  }, [])
+  const [value, setValue] = React.useState(inputValue)
+  const [error, setError] = React.useState<InvalidMarkdownElement>(null)
+
+  const debouncedValue = useDebounce(value, 500)
+
+  React.useEffect(() => {
+    // @ts-ignore no access to the rich-text type from this package
+    const parsedValue = parseMDX(value, field, (value) => value)
+    if (parsedValue.children[0]) {
+      if (parsedValue.children[0].type === 'invalid_markdown') {
+        const invalidMarkdown = parsedValue.children[0]
+        setError(invalidMarkdown)
+        return
+      }
+    }
+    props.input.onChange(parsedValue)
+    setError(null)
+  }, [JSON.stringify(debouncedValue)])
+
+  React.useEffect(() => {
+    if (monacoEditorRef.current) {
+      if (error) {
+        const errorMessage = buildError(error)
+        monaco.editor.setModelMarkers(monacoEditorRef.current.getModel(), id, [
+          {
+            ...errorMessage.position,
+            message: errorMessage.message,
+            severity: 8,
+          },
+        ])
+      } else {
+        monaco.editor.setModelMarkers(
+          monacoEditorRef.current.getModel(),
+          id,
+          []
+        )
+      }
+    }
+  }, [JSON.stringify(error), monacoEditorRef.current])
+
+  React.useEffect(() => {
+    if (monaco) {
+      monaco.languages.typescript.typescriptDefaults.setEagerModelSync(true)
+      monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
+        // disable errors
+        noSemanticValidation: true,
+        noSyntaxValidation: true,
+      })
+      // TODO: autocomplete suggestions
+      // monaco.languages.registerCompletionItemProvider('markdown', {
+      //   provideCompletionItems: function (model, position) {
+      //     const word = model.getWordUntilPosition(position)
+      //     const range = {
+      //       startLineNumber: position.lineNumber,
+      //       endLineNumber: position.lineNumber,
+      //       startColumn: word.startColumn,
+      //       endColumn: word.endColumn,
+      //     }
+      //     return {
+      //       suggestions: [
+      //         {
+      //           label: '<DateTime />',
+      //           insertText: '<DateTime format="iso" />',
+      //           kind: 0,
+      //           range,
+      //         },
+      //       ],
+      //     }
+      //   },
+      // })
+    }
+  }, [monaco])
+
+  function handleEditorDidMount(
+    monacoEditor: monaco.editor.IStandaloneCodeEditor,
+    monaco: Monaco
+  ) {
+    monacoEditorRef.current = monacoEditor
+    monacoEditor.onDidContentSizeChange(() => {
+      // FIXME: if the window is too tall the performance degrades, come up with a nice
+      // balance between the two
+      setHeight(Math.min(Math.max(100, monacoEditor.getContentHeight()), 1000))
+      monacoEditor.layout()
+    })
+  }
+
+  return (
+    <div className="relative">
+      <div className="sticky -top-4 w-full flex justify-between mb-2 z-50 max-w-full">
+        <Button onClick={() => props.setRawMode(false)}>
+          View in rich-text editor
+        </Button>
+        <ErrorMessage error={error} />
+      </div>
+      <div style={{ height: `${height}px` }}>
+        <MonacoEditor
+          path={id}
+          onMount={handleEditorDidMount}
+          // Setting a custom theme is kind of buggy because it doesn't get defined until monaco has mounted.
+          // So we end up with the default (light) theme in some scenarios. Seems like a race condition.
+          // theme="vs-dark"
+          options={{
+            scrollBeyondLastLine: false,
+            tabSize: 2,
+            disableLayerHinting: true,
+            accessibilitySupport: 'off',
+            codeLens: false,
+            wordWrap: 'on',
+            minimap: {
+              enabled: false,
+            },
+            fontSize: 14,
+            lineHeight: 2,
+            formatOnPaste: true,
+            lineNumbers: 'off',
+            formatOnType: true,
+            fixedOverflowWidgets: true,
+            // Takes too much horizontal space for iframe
+            folding: false,
+            renderLineHighlight: 'none',
+            scrollbar: {
+              verticalScrollbarSize: 1,
+              horizontalScrollbarSize: 1,
+              // https://github.com/microsoft/monaco-editor/issues/2007#issuecomment-644425664
+              alwaysConsumeMouseWheel: false,
+            },
+          }}
+          language={'markdown'}
+          value={value}
+          onChange={(value) => {
+            try {
+              setValue(value)
+            } catch (e) {
+              console.log('error', e)
+            }
+          }}
+        />
+      </div>
+    </div>
+  )
+}
+
+const Button = (props) => {
+  return (
+    <button
+      className={`${
+        props.align === 'left'
+          ? 'rounded-l-md border-r-0'
+          : 'rounded-r-md border-l-0'
+      } shadow rounded-md bg-white cursor-pointer relative inline-flex items-center px-2 py-2 border border-gray-200 hover:text-white text-sm font-medium transition-all ease-out duration-150 hover:bg-blue-500 focus:z-10 focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500`}
+      type="button"
+      onClick={props.onClick}
+    >
+      <span className="text-sm font-semibold tracking-wide align-baseline mr-1">
+        {props.children}
+      </span>
+    </button>
+  )
+}
+
+export default RawEditor