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

package/CHANGELOG.md

@@ -0,0 +1,17 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [8.25.1-snapshot-19](https://github.com/instructure/instructure-ui/compare/v8.25.0...v8.25.1-snapshot-19) (2022-06-28)
+
+
+### Features
+
+* **ui-source-code-editor,ui-code-editor,ui:** add new `SourceCodeEditor` component ([b5064f5](https://github.com/instructure/instructure-ui/commit/b5064f5c767eb2d5c5a6d7f5bb6d05bd689418b5))
+
+
+
+
+
+See the instructure-ui mono-repo [change log](#CHANGELOG) for past changes.

package/README.md

@@ -0,0 +1,48 @@
+---
+category: packages
+---
+
+## ui-source-code-editor
+
+[![npm][npm]][npm-url] 
+[![MIT License][license-badge]][license] 
+[![Code of Conduct][coc-badge]][coc]
+
+A code editor component.
+
+### Components
+
+The `ui-source-code-editor` package contains the following:
+
+- [SourceCodeEditor](#SourceCodeEditor)
+
+### Installation
+
+```sh
+yarn add @instructure/ui-source-code-editor
+```
+
+### Usage
+
+```js
+import React from 'react'
+import { SourceCodeEditor } from '@instructure/ui-source-code-editor'
+
+const MyCodeEditor = () => {
+  return (
+    <SourceCodeEditor
+      label="code editor"
+      defaultValue='{"foo": "bar"}'
+      language="javascript"
+      readOnly
+    />
+  )
+}
+```
+
+[npm]: https://img.shields.io/npm/v/@instructure/ui-source-code-editor.svg
+[npm-url]: https://npmjs.com/package/@instructure/ui-source-code-editor
+[license-badge]: https://img.shields.io/npm/l/instructure-ui.svg?style=flat-square
+[license]: https://github.com/instructure/instructure-ui/blob/master/LICENSE
+[coc-badge]: https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square
+[coc]: https://github.com/instructure/instructure-ui/blob/master/CODE_OF_CONDUCT.md

package/es/SourceCodeEditor/SourceCodeEditorLocator.js

@@ -0,0 +1,81 @@
+/*
+ * 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 { locator } from '@instructure/ui-test-locator';
+import { find, findAll } from '@instructure/ui-test-queries';
+import { SourceCodeEditor } from './index'; // @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
+
+export const SourceCodeEditorLocator = locator(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 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 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 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 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 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 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 findAll('.cm-gutterElement', ...args); // first gutter element is always a placeholder
+
+    allGutterElements.shift();
+    return allGutterElements;
+  }
+});

package/es/SourceCodeEditor/customKeybinding.js

@@ -0,0 +1,96 @@
+/*
+ * 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 { cursorCharLeft, cursorCharRight, cursorGroupLeft, cursorGroupRight, cursorLineBoundaryBackward, cursorLineBoundaryForward, cursorSyntaxLeft, cursorSyntaxRight, deleteCharBackward, deleteCharForward, deleteGroupBackward, deleteGroupForward, deleteToLineEnd, deleteToLineStart, selectCharLeft, selectCharRight, selectGroupLeft, selectGroupRight, selectLineBoundaryBackward, selectLineBoundaryForward, selectSyntaxLeft, selectSyntaxRight } from '@codemirror/commands';
+const rtlHorizontalArrowKeymap = [// Left/Start/Forward
+{
+  key: 'ArrowLeft',
+  run: cursorCharRight,
+  shift: selectCharRight,
+  preventDefault: true
+}, {
+  key: 'Mod-ArrowLeft',
+  mac: 'Alt-ArrowLeft',
+  run: cursorGroupRight,
+  shift: selectGroupRight
+}, {
+  key: 'Alt-ArrowLeft',
+  mac: 'Ctrl-ArrowLeft',
+  run: cursorSyntaxRight,
+  shift: selectSyntaxRight
+}, {
+  mac: 'Cmd-ArrowLeft',
+  run: cursorLineBoundaryForward,
+  shift: selectLineBoundaryForward
+}, {
+  key: 'Home',
+  run: cursorLineBoundaryForward,
+  shift: selectLineBoundaryForward
+}, // Right/End/Backward
+{
+  key: 'ArrowRight',
+  run: cursorCharLeft,
+  shift: selectCharLeft,
+  preventDefault: true
+}, {
+  key: 'Mod-ArrowRight',
+  mac: 'Alt-ArrowRight',
+  run: cursorGroupLeft,
+  shift: selectGroupLeft
+}, {
+  key: 'Alt-ArrowRight',
+  mac: 'Ctrl-ArrowRight',
+  run: cursorSyntaxLeft,
+  shift: selectSyntaxLeft
+}, {
+  mac: 'Cmd-ArrowRight',
+  run: cursorLineBoundaryBackward,
+  shift: selectLineBoundaryBackward
+}, {
+  key: 'End',
+  run: cursorLineBoundaryBackward,
+  shift: selectLineBoundaryBackward
+}, // Delete/Backspace
+{
+  key: 'Delete',
+  run: deleteCharBackward
+}, {
+  key: 'Mod-Delete',
+  mac: 'Alt-Delete',
+  run: deleteGroupBackward
+}, {
+  key: 'Backspace',
+  run: deleteCharForward,
+  shift: deleteCharForward
+}, {
+  key: 'Mod-Backspace',
+  mac: 'Alt-Backspace',
+  run: deleteGroupForward
+}, {
+  mac: 'Mod-Delete',
+  run: deleteToLineStart
+}, {
+  mac: 'Mod-Backspace',
+  run: deleteToLineEnd
+}];
+export { rtlHorizontalArrowKeymap };