@instructure/ui-source-code-editor 8.25.1-snapshot-19

package/es/SourceCodeEditor/styles.js

@@ -0,0 +1,204 @@
+/*
+ * 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) => {
+  const attachment = props.attachment;
+  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'
+    }
+  };
+  return {
+    codeEditor: {
+      label: 'codeEditor',
+      position: 'relative'
+    },
+    codeEditorContainer: {
+      label: 'codeEditorContainer',
+      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,
+        height: 'auto',
+        fontFamily: componentTheme.fontFamily,
+        fontSize: componentTheme.fontSize,
+        color: componentTheme.color,
+        border: 0,
+        lineHeight: 1.4375,
+        minHeight: '1.4375rem',
+        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 ${componentTheme === null || componentTheme === void 0 ? void 0 : 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: 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: '#708'
+    }, {
+      tag: [tags.atom, tags.bool, tags.url, tags.contentSeparator, tags.labelName],
+      color: '#219'
+    }, {
+      tag: [tags.literal, tags.inserted],
+      color: '#164'
+    }, {
+      tag: [tags.string, tags.deleted],
+      color: '#a11'
+    }, // {
+    //   tag: [tags.regexp, tags.escape, tags.special(tags.string)],
+    //   color: '#e40'
+    // },
+    {
+      tag: tags.definition(tags.variableName),
+      color: '#00f'
+    }, {
+      tag: tags.local(tags.variableName),
+      color: '#30a'
+    }, // { tag: [tags.typeName, tags.namespace], color: '#085' },
+    {
+      tag: tags.className,
+      color: '#167'
+    }, {
+      tag: [tags.special(tags.variableName), tags.macroName],
+      color: '#256'
+    }, {
+      tag: tags.definition(tags.propertyName),
+      color: '#00c'
+    }, {
+      tag: 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: tags.meta,
+      color: '#757075'
+    }, {
+      tag: [tags.regexp, tags.escape, tags.special(tags.string)],
+      color: '#d13b00'
+    }, {
+      tag: [tags.typeName, tags.namespace],
+      color: '#008051'
+    }, {
+      tag: tags.invalid,
+      color: '#e60000'
+    }]
+  };
+};
+
+export default generateStyle;

package/es/SourceCodeEditor/theme.js

@@ -0,0 +1,52 @@
+/*
+ * 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 = theme.colors,
+        borders = theme.borders,
+        typography = theme.typography,
+        spacing = theme.spacing;
+  const componentVariables = {
+    fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamilyMonospace,
+    fontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeSmall,
+    background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
+    color: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
+    gutterBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundLight,
+    borderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
+    borderColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
+    borderRadius: borders === null || borders === void 0 ? void 0 : borders.radiusMedium,
+    focusBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderBrand,
+    horizontalPadding: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall,
+    verticalPadding: spacing === null || spacing === void 0 ? void 0 : spacing.xxSmall
+  };
+  return { ...componentVariables
+  };
+};
+
+export default generateComponentTheme;

package/es/index.js

@@ -0,0 +1,24 @@
+/*
+ * 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.
+ */
+export { SourceCodeEditor } from './SourceCodeEditor';

package/lib/SourceCodeEditor/SourceCodeEditorLocator.js

@@ -0,0 +1,92 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SourceCodeEditorLocator = void 0;
+
+var _locator = require("@instructure/ui-test-locator/lib/utils/locator.js");
+
+var _uiTestQueries = require("@instructure/ui-test-queries");
+
+var _index = require("./index");
+
+/*
+ * 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.
+ */
+// @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
+const SourceCodeEditorLocator = (0, _locator.locator)(_index.SourceCodeEditor.selector, {
+  findContainer: async function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return await (0, _uiTestQueries.find)('[class$=-codeEditorContainer]', ...args);
+  },
+  findLabel: async function () {
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
+    }
+
+    return await (0, _uiTestQueries.find)('[class$=-screenReaderContent]', ...args);
+  },
+  findInput: async function () {
+    for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+      args[_key3] = arguments[_key3];
+    }
+
+    return await (0, _uiTestQueries.find)('[role="textbox"]', ...args);
+  },
+  findGutter: async function () {
+    for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
+      args[_key4] = arguments[_key4];
+    }
+
+    return await (0, _uiTestQueries.find)('.cm-gutter', ...args);
+  },
+  findScroller: async function () {
+    for (var _len5 = arguments.length, args = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {
+      args[_key5] = arguments[_key5];
+    }
+
+    return await (0, _uiTestQueries.find)('.cm-scroller', ...args);
+  },
+  findAllLines: async function () {
+    for (var _len6 = arguments.length, args = new Array(_len6), _key6 = 0; _key6 < _len6; _key6++) {
+      args[_key6] = arguments[_key6];
+    }
+
+    return await (0, _uiTestQueries.findAll)('.cm-line', ...args);
+  },
+  findAllGutterElements: async function () {
+    for (var _len7 = arguments.length, args = new Array(_len7), _key7 = 0; _key7 < _len7; _key7++) {
+      args[_key7] = arguments[_key7];
+    }
+
+    const allGutterElements = await (0, _uiTestQueries.findAll)('.cm-gutterElement', ...args); // first gutter element is always a placeholder
+
+    allGutterElements.shift();
+    return allGutterElements;
+  }
+});
+exports.SourceCodeEditorLocator = SourceCodeEditorLocator;

package/lib/SourceCodeEditor/customKeybinding.js

@@ -0,0 +1,104 @@
+"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 = [// 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.cursorLineBoundaryForward,
+  shift: _commands.selectLineBoundaryForward
+}, {
+  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.cursorLineBoundaryBackward,
+  shift: _commands.selectLineBoundaryBackward
+}, {
+  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
+}];
+exports.rtlHorizontalArrowKeymap = rtlHorizontalArrowKeymap;