@instructure/ui-source-code-editor 11.7.3 → 11.7.4-pr-snapshot-1781695314229

package/lib/SourceCodeEditor/v1/styles.js

@@ -1,230 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _highlight = require("@lezer/highlight");
-/*
- * 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.
- */
-
-/**
- * ---
- * 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) => {
-  const {
-    attachment,
-    height,
-    width
-  } = props;
-  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?.borderColor,
-      borderStyle: 'solid',
-      borderWidth: 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?.borderWidth} solid ${componentTheme?.focusBorderColor}`
-      },
-      '.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-selectionBackground': {
-        background: 'transparent'
-      },
-      '.cm-focused .cm-selectionBackground': {
-        background: '#d7d4f0'
-      },
-      '.cm-placeholder': {
-        // for better contrast
-        color: '#707070'
-      }
-    },
-    highlightStyle: [
-    /**
-     * Copy of `defaultHighlightStyle` from '@codemirror/language'
-     */
-    // { tag: tags.meta, color: '#7a757a' },
-    {
-      tag: _highlight.tags.link,
-      textDecoration: 'underline'
-    }, {
-      tag: _highlight.tags.heading,
-      textDecoration: 'underline',
-      fontWeight: 'bold'
-    }, {
-      tag: _highlight.tags.emphasis,
-      fontStyle: 'italic'
-    }, {
-      tag: _highlight.tags.strong,
-      fontWeight: 'bold'
-    }, {
-      tag: _highlight.tags.strikethrough,
-      textDecoration: 'line-through'
-    }, {
-      tag: _highlight.tags.keyword,
-      color: '#708'
-    }, {
-      tag: [_highlight.tags.atom, _highlight.tags.bool, _highlight.tags.url, _highlight.tags.contentSeparator, _highlight.tags.labelName],
-      color: '#219'
-    }, {
-      tag: [_highlight.tags.literal, _highlight.tags.inserted],
-      color: '#164'
-    }, {
-      tag: [_highlight.tags.string, _highlight.tags.deleted],
-      color: '#a11'
-    },
-    // {
-    //   tag: [tags.regexp, tags.escape, tags.special(tags.string)],
-    //   color: '#e40'
-    // },
-    {
-      tag: _highlight.tags.definition(_highlight.tags.variableName),
-      color: '#00f'
-    }, {
-      tag: _highlight.tags.local(_highlight.tags.variableName),
-      color: '#30a'
-    },
-    // { tag: [tags.typeName, tags.namespace], color: '#085' },
-    {
-      tag: _highlight.tags.className,
-      color: '#167'
-    }, {
-      tag: [_highlight.tags.special(_highlight.tags.variableName), _highlight.tags.macroName],
-      color: '#256'
-    }, {
-      tag: _highlight.tags.definition(_highlight.tags.propertyName),
-      color: '#00c'
-    }, {
-      tag: _highlight.tags.comment,
-      color: '#940'
-    },
-    // { tag: tags.invalid, color: '#f00' },
-
-    /**
-     * Custom highlighting overrides
-     * (where original colors don't have enough contrast against #fff
-     * or active highlight background)
-     */
-    {
-      tag: _highlight.tags.meta,
-      color: '#757075'
-    }, {
-      tag: [_highlight.tags.regexp, _highlight.tags.escape, _highlight.tags.special(_highlight.tags.string)],
-      color: '#d13b00'
-    }, {
-      tag: [_highlight.tags.typeName, _highlight.tags.namespace],
-      color: '#008051'
-    }, {
-      tag: _highlight.tags.invalid,
-      color: '#e60000'
-    }]
-  };
-};
-var _default = exports.default = generateStyle;

package/lib/SourceCodeEditor/v1/theme.js

@@ -1,60 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-/*
- * 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.
- */
-
-/**
- * Generates the theme object for the component from the theme and provided additional information
- * @param  {Object} theme The actual theme object.
- * @return {Object} The final theme object with the overrides and component variables
- */
-const generateComponentTheme = theme => {
-  const {
-    colors,
-    borders,
-    typography,
-    spacing
-  } = theme;
-  const componentVariables = {
-    fontFamily: typography?.fontFamilyMonospace,
-    fontSize: typography?.fontSizeSmall,
-    background: colors?.contrasts?.white1010,
-    color: colors?.contrasts?.grey125125,
-    gutterBackground: colors?.contrasts?.grey1111,
-    borderWidth: borders?.widthSmall,
-    borderColor: colors?.contrasts?.grey3045,
-    borderRadius: borders?.radiusMedium,
-    focusBorderColor: colors?.contrasts?.blue4570,
-    horizontalPadding: spacing?.xSmall,
-    verticalPadding: spacing?.xxSmall
-  };
-  return {
-    ...componentVariables
-  };
-};
-var _default = exports.default = generateComponentTheme;

package/lib/SourceCodeEditor/v2/SearchPanel.js

@@ -1,121 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = customSearch;
-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 _IconArrowOpenUpLine = require("@instructure/ui-icons/lib/generated/IconArrowOpenUpLine.js");
-var _IconSearchLine = require("@instructure/ui-icons/lib/generated/IconSearchLine.js");
-var _client = require("react-dom/client");
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
-/*
- * 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 [searchQueryStr, setSearchQueryStr] = (0, _react.useState)('');
-  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?.focus(), 0);
-    },
-    size: "small",
-    display: "inline-block",
-    width: "20rem",
-    placeholder: searchConfig.placeholder,
-    onChange: handleChange,
-    onKeyDown: handleKeyDown,
-    onKeyUp: handleKeyUp,
-    renderBeforeInput: (0, _jsxRuntime.jsx)(_IconSearchLine.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: (0, _jsxRuntime.jsx)(_IconArrowOpenDownLine.IconArrowOpenDownLine, {})
-      }), (0, _jsxRuntime.jsx)(_latest2.IconButton, {
-        size: "small",
-        withBorder: false,
-        withBackground: false,
-        onClick: handleFindPrev,
-        screenReaderLabel: searchConfig.prevResultLabel,
-        children: (0, _jsxRuntime.jsx)(_IconArrowOpenUpLine.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

@@ -1,105 +0,0 @@
-"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
-}];