@instructure/ui-source-code-editor 11.6.0 → 11.6.1-snapshot-129

package/es/SourceCodeEditor/v2/styles.js

@@ -0,0 +1,228 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { tags } from '@lezer/highlight';
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param  {Object} componentTheme The theme variable object.
+ * @param  {Object} props the props of the component, the style is applied to
+ * @return {Object} The final style object, which will be used in the component
+ */
+const generateStyle = (componentTheme, props, sharedTokens) => {
+  const attachment = props.attachment,
+    height = props.height,
+    width = props.width;
+  const attachmentBorderRadius = {
+    top: {
+      borderBottomLeftRadius: 0,
+      borderBottomRightRadius: 0
+    },
+    bottom: {
+      borderTopLeftRadius: 0,
+      borderTopRightRadius: 0
+    }
+  };
+  const attachmentVariants = {
+    top: {
+      marginBottom: 0,
+      marginTop: '0.25rem'
+    },
+    bottom: {
+      borderTopLeftRadius: 0,
+      borderTopRightRadius: 0,
+      marginBottom: '0.25rem'
+    }
+  };
+  const lineHeight = 1.4375;
+  return {
+    codeEditor: {
+      label: 'codeEditor',
+      position: 'relative',
+      boxSizing: 'border-box',
+      height: height || 'auto',
+      width
+    },
+    label: {
+      label: 'label',
+      height: '100%',
+      width: '100%'
+    },
+    codeEditorContainer: {
+      label: 'codeEditorContainer',
+      height: '100%',
+      width: '100%',
+      borderColor: componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.borderColor,
+      borderStyle: 'solid',
+      borderWidth: componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.borderWidth,
+      borderRadius: componentTheme.borderRadius,
+      marginBottom: '1rem',
+      ...(attachment && {
+        ...attachmentVariants[attachment],
+        ...attachmentBorderRadius[attachment]
+      })
+    },
+    theme: {
+      '&': {
+        overflow: 'hidden',
+        background: componentTheme.background,
+        fontFamily: componentTheme.fontFamily,
+        fontSize: componentTheme.fontSize,
+        color: componentTheme.color,
+        border: 0,
+        height: '100%',
+        width: '100%',
+        minHeight: `${lineHeight}rem`,
+        lineHeight,
+        borderRadius: componentTheme.borderRadius,
+        ...(attachment && {
+          ...attachmentBorderRadius[attachment]
+        })
+      },
+      '&.cm-editor.cm-focused': {
+        // Provide a simple default outline to make sure a focused
+        // editor is visually distinct. Can't leave the default behavior
+        // because that will apply to the content element, which is
+        // inside the scrollable container and doesn't include the
+        // gutters. We also can't use an 'auto' outline, since those
+        // are, for some reason, drawn behind the element content, which
+        // will cause things like the active line background to cover
+        // the outline (#297).
+        outline: `${componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.borderWidth} solid ${sharedTokens.focusOutline.infoColor}`
+      },
+      '.cm-content': {
+        padding: `${componentTheme.verticalPadding} 0`
+      },
+      '.cm-scroller': {
+        fontFamily: componentTheme.fontFamily,
+        lineHeight: 1.4375
+      },
+      '.cm-gutters': {
+        background: componentTheme.gutterBackground,
+        borderColor: componentTheme.borderColor
+      },
+      '.cm-line': {
+        padding: `0 ${componentTheme.horizontalPadding}`
+      },
+      '.cm-activeLine': {
+        backgroundColor: componentTheme.activeLineColor
+      },
+      '&.cm-focused .cm-cursor': {
+        borderLeftColor: componentTheme.color
+      },
+      '.cm-selectionBackground': {
+        background: 'transparent'
+      },
+      '.cm-selectionBackground, .cm-editor::selection': {
+        backgroundColor: componentTheme.focusedSelectionBackgroundColor + ' !important'
+      },
+      '.cm-placeholder': {
+        // for better contrast
+        color: componentTheme.placeholderBackgroundColor
+      }
+    },
+    highlightStyle: [
+    /**
+     * Copy of `defaultHighlightStyle` from '@codemirror/language'
+     */
+    // { tag: tags.meta, color: '#7a757a' },
+    {
+      tag: tags.link,
+      textDecoration: 'underline'
+    }, {
+      tag: tags.heading,
+      textDecoration: 'underline',
+      fontWeight: 'bold'
+    }, {
+      tag: tags.emphasis,
+      fontStyle: 'italic'
+    }, {
+      tag: tags.strong,
+      fontWeight: 'bold'
+    }, {
+      tag: tags.strikethrough,
+      textDecoration: 'line-through'
+    }, {
+      tag: tags.keyword,
+      color: componentTheme.tagKeywordColor
+    }, {
+      tag: [tags.atom, tags.bool, tags.url, tags.contentSeparator, tags.labelName],
+      color: componentTheme.tagAtomColor
+    }, {
+      tag: [tags.literal, tags.inserted],
+      color: componentTheme.tagLiteralColor
+    }, {
+      tag: [tags.string, tags.deleted],
+      color: componentTheme.tagStringColor
+    },
+    // {
+    //   tag: [tags.regexp, tags.escape, tags.special(tags.string)],
+    //   color: '#e40'
+    // },
+    {
+      tag: tags.definition(tags.variableName),
+      color: componentTheme.tagDefinitionVariableNameColor
+    }, {
+      tag: tags.local(tags.variableName),
+      color: componentTheme.tagLocalVariableNameColor
+    },
+    // { tag: [tags.typeName, tags.namespace], color: '#085' },
+    {
+      tag: tags.className,
+      color: componentTheme.tagClassNameColor
+    }, {
+      tag: [tags.special(tags.variableName), tags.macroName],
+      color: componentTheme.tagSpecialVariableNameColor
+    }, {
+      tag: tags.definition(tags.propertyName),
+      color: componentTheme.tagDefinitionPropertyNameColor
+    }, {
+      tag: tags.comment,
+      color: componentTheme.tagCommentColor
+    },
+    // { tag: tags.invalid, color: '#f00' },
+
+    /**
+     * Custom highlighting overrides
+     * (where original colors don't have enough contrast against #fff
+     * or active highlight background)
+     */
+    {
+      tag: tags.meta,
+      color: componentTheme.tagMetaColor
+    }, {
+      tag: [tags.regexp, tags.escape, tags.special(tags.string)],
+      color: componentTheme.tagRegExpColor
+    }, {
+      tag: [tags.typeName, tags.namespace],
+      color: componentTheme.tagTypeNameColor
+    }, {
+      tag: tags.invalid,
+      color: componentTheme.tagInvalidColor
+    }]
+  };
+};
+export default generateStyle;

package/es/{index.js → exports/a.js}

@@ -21,4 +21,4 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-export { SourceCodeEditor } from "./SourceCodeEditor/index.js";
+export { SourceCodeEditor } from "../SourceCodeEditor/v1/index.js";

package/{src/index.ts → es/exports/b.js}

@@ -21,5 +21,4 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-export { SourceCodeEditor } from './SourceCodeEditor'
-export type { SourceCodeEditorProps } from './SourceCodeEditor/props'
+export { SourceCodeEditor } from "../SourceCodeEditor/v2/index.js";

package/lib/SourceCodeEditor/{SearchPanel.js → v1/SearchPanel.js}

@@ -8,11 +8,11 @@ exports.default = customSearch;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _search = require("@codemirror/search");
-var _TextInput = require("@instructure/ui-text-input/lib/TextInput");
-var _IconButton = require("@instructure/ui-buttons/lib/IconButton");
-var _IconArrowOpenDownLine = require("@instructure/ui-icons/lib/IconArrowOpenDownLine.js");
-var _IconArrowOpenUpLine2 = require("@instructure/ui-icons/lib/IconArrowOpenUpLine.js");
-var _IconSearchLine2 = require("@instructure/ui-icons/lib/IconSearchLine.js");
+var _v11_ = require("@instructure/ui-text-input/v11_6");
+var _v11_2 = require("@instructure/ui-buttons/v11_6");
+var _IconArrowOpenDownLine = require("@instructure/ui-icons/lib/generated/IconArrowOpenDownLine.js");
+var _IconArrowOpenUpLine2 = require("@instructure/ui-icons/lib/generated/IconArrowOpenUpLine.js");
+var _IconSearchLine2 = require("@instructure/ui-icons/lib/generated/IconSearchLine.js");
 var _client = require("react-dom/client");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
 var _IconSearchLine, _IconArrowOpenDownLin, _IconArrowOpenUpLine;
@@ -74,7 +74,7 @@ function SearchPanel({
     handleHighlightSearch(searchQueryStr);
     (0, _search.findPrevious)(view);
   };
-  return (0, _jsxRuntime.jsx)(_TextInput.TextInput, {
+  return (0, _jsxRuntime.jsx)(_v11_.TextInput, {
     renderLabel: "",
     inputRef: r => {
       setTimeout(() => r === null || r === void 0 ? void 0 : r.focus(), 0);
@@ -90,14 +90,14 @@ function SearchPanel({
       size: "x-small"
     })),
     renderAfterInput: (0, _jsxRuntime.jsxs)("span", {
-      children: [(0, _jsxRuntime.jsx)(_IconButton.IconButton, {
+      children: [(0, _jsxRuntime.jsx)(_v11_2.IconButton, {
         size: "small",
         withBorder: false,
         withBackground: false,
         onClick: handleFindNext,
         screenReaderLabel: searchConfig.nextResultLabel,
         children: _IconArrowOpenDownLin || (_IconArrowOpenDownLin = (0, _jsxRuntime.jsx)(_IconArrowOpenDownLine.IconArrowOpenDownLine, {}))
-      }), (0, _jsxRuntime.jsx)(_IconButton.IconButton, {
+      }), (0, _jsxRuntime.jsx)(_v11_2.IconButton, {
         size: "small",
         withBorder: false,
         withBackground: false,

package/lib/SourceCodeEditor/{index.js → v1/index.js}

@@ -66,7 +66,7 @@ var _dec, _dec2, _dec3, _class, _SourceCodeEditor;
 category: components
 ---
 **/
-let SourceCodeEditor = exports.SourceCodeEditor = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec3 = (0, _textDirectionContextConsumer.textDirectionContextConsumer)(), _dec(_class = _dec2(_class = _dec3(_class = (_SourceCodeEditor = class SourceCodeEditor extends _react.Component {
+let SourceCodeEditor = exports.SourceCodeEditor = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyleLegacy)(_styles.default, _theme.default), _dec3 = (0, _textDirectionContextConsumer.textDirectionContextConsumer)(), _dec(_class = _dec2(_class = _dec3(_class = (_SourceCodeEditor = class SourceCodeEditor extends _react.Component {
   addAnimationFrame(callback) {
     if (typeof callback === 'function') {
       this._raf.push((0, _requestAnimationFrame.requestAnimationFrame)(callback));

package/lib/SourceCodeEditor/v2/SearchPanel.js

@@ -0,0 +1,126 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = customSearch;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _search = require("@codemirror/search");
+var _latest = require("@instructure/ui-text-input/latest");
+var _latest2 = require("@instructure/ui-buttons/latest");
+var _IconArrowOpenDownLine = require("@instructure/ui-icons/lib/generated/IconArrowOpenDownLine.js");
+var _IconArrowOpenUpLine2 = require("@instructure/ui-icons/lib/generated/IconArrowOpenUpLine.js");
+var _IconSearchLine2 = require("@instructure/ui-icons/lib/generated/IconSearchLine.js");
+var _client = require("react-dom/client");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _IconSearchLine, _IconArrowOpenDownLin, _IconArrowOpenUpLine;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+function SearchPanel({
+  view,
+  searchConfig
+}) {
+  const _useState = (0, _react.useState)(''),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    searchQueryStr = _useState2[0],
+    setSearchQueryStr = _useState2[1];
+  const handleChange = (_e, value) => {
+    setSearchQueryStr(value);
+    handleHighlightSearch(value);
+  };
+  const handleHighlightSearch = searchStr => {
+    view.dispatch({
+      effects: _search.setSearchQuery.of(new _search.SearchQuery({
+        search: searchStr
+      }))
+    });
+  };
+  const handleKeyDown = e => {
+    if (e.key !== 'Enter') return;
+    if (!e.shiftKey) handleFindNext();else handleFindPrev();
+  };
+  const handleKeyUp = e => {
+    if (e.key !== 'Escape') return;
+    (0, _search.closeSearchPanel)(view);
+  };
+  const handleFindNext = () => {
+    handleHighlightSearch(searchQueryStr);
+    (0, _search.findNext)(view);
+  };
+  const handleFindPrev = () => {
+    handleHighlightSearch(searchQueryStr);
+    (0, _search.findPrevious)(view);
+  };
+  return (0, _jsxRuntime.jsx)(_latest.TextInput, {
+    renderLabel: "",
+    inputRef: r => {
+      setTimeout(() => r === null || r === void 0 ? void 0 : r.focus(), 0);
+    },
+    size: "small",
+    display: "inline-block",
+    width: "20rem",
+    placeholder: searchConfig.placeholder,
+    onChange: handleChange,
+    onKeyDown: handleKeyDown,
+    onKeyUp: handleKeyUp,
+    renderBeforeInput: _IconSearchLine || (_IconSearchLine = (0, _jsxRuntime.jsx)(_IconSearchLine2.IconSearchLine, {
+      size: "x-small"
+    })),
+    renderAfterInput: (0, _jsxRuntime.jsxs)("span", {
+      children: [(0, _jsxRuntime.jsx)(_latest2.IconButton, {
+        size: "small",
+        withBorder: false,
+        withBackground: false,
+        onClick: handleFindNext,
+        screenReaderLabel: searchConfig.nextResultLabel,
+        children: _IconArrowOpenDownLin || (_IconArrowOpenDownLin = (0, _jsxRuntime.jsx)(_IconArrowOpenDownLine.IconArrowOpenDownLine, {}))
+      }), (0, _jsxRuntime.jsx)(_latest2.IconButton, {
+        size: "small",
+        withBorder: false,
+        withBackground: false,
+        onClick: handleFindPrev,
+        screenReaderLabel: searchConfig.prevResultLabel,
+        children: _IconArrowOpenUpLine || (_IconArrowOpenUpLine = (0, _jsxRuntime.jsx)(_IconArrowOpenUpLine2.IconArrowOpenUpLine, {}))
+      })]
+    })
+  });
+}
+function customSearch(searchConfig) {
+  return searchConfig ? (0, _search.search)({
+    createPanel: view => {
+      const dom = document.createElement('div');
+      dom.style.padding = '8px';
+      const root = (0, _client.createRoot)(dom);
+      root.render((0, _jsxRuntime.jsx)(SearchPanel, {
+        view: view,
+        searchConfig: searchConfig
+      }));
+      return {
+        dom
+      };
+    }
+  }) : [];
+}

package/lib/SourceCodeEditor/v2/customKeybinding.js

@@ -0,0 +1,105 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.rtlHorizontalArrowKeymap = void 0;
+var _commands = require("@codemirror/commands");
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+const rtlHorizontalArrowKeymap = exports.rtlHorizontalArrowKeymap = [
+// Left/Start/Forward
+{
+  key: 'ArrowLeft',
+  run: _commands.cursorCharRight,
+  shift: _commands.selectCharRight,
+  preventDefault: true
+}, {
+  key: 'Mod-ArrowLeft',
+  mac: 'Alt-ArrowLeft',
+  run: _commands.cursorGroupRight,
+  shift: _commands.selectGroupRight
+}, {
+  key: 'Alt-ArrowLeft',
+  mac: 'Ctrl-ArrowLeft',
+  run: _commands.cursorSyntaxRight,
+  shift: _commands.selectSyntaxRight
+}, {
+  mac: 'Cmd-ArrowLeft',
+  run: _commands.cursorLineBoundaryRight,
+  shift: _commands.selectLineBoundaryRight
+}, {
+  key: 'Home',
+  run: _commands.cursorLineBoundaryForward,
+  shift: _commands.selectLineBoundaryForward
+},
+// Right/End/Backward
+{
+  key: 'ArrowRight',
+  run: _commands.cursorCharLeft,
+  shift: _commands.selectCharLeft,
+  preventDefault: true
+}, {
+  key: 'Mod-ArrowRight',
+  mac: 'Alt-ArrowRight',
+  run: _commands.cursorGroupLeft,
+  shift: _commands.selectGroupLeft
+}, {
+  key: 'Alt-ArrowRight',
+  mac: 'Ctrl-ArrowRight',
+  run: _commands.cursorSyntaxLeft,
+  shift: _commands.selectSyntaxLeft
+}, {
+  mac: 'Cmd-ArrowRight',
+  run: _commands.cursorLineBoundaryLeft,
+  shift: _commands.selectLineBoundaryLeft
+}, {
+  key: 'End',
+  run: _commands.cursorLineBoundaryBackward,
+  shift: _commands.selectLineBoundaryBackward
+},
+// Delete/Backspace
+{
+  key: 'Delete',
+  run: _commands.deleteCharBackward
+}, {
+  key: 'Mod-Delete',
+  mac: 'Alt-Delete',
+  run: _commands.deleteGroupBackward
+}, {
+  key: 'Backspace',
+  run: _commands.deleteCharForward,
+  shift: _commands.deleteCharForward
+}, {
+  key: 'Mod-Backspace',
+  mac: 'Alt-Backspace',
+  run: _commands.deleteGroupForward
+}, {
+  mac: 'Mod-Delete',
+  run: _commands.deleteToLineStart
+}, {
+  mac: 'Mod-Backspace',
+  run: _commands.deleteToLineEnd
+}];