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

package/lib/SourceCodeEditor/v2/index.js

@@ -1,559 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.SourceCodeEditor = void 0;
-var _react = require("react");
-var _deepEqual = require("@instructure/ui-utils/lib/deepEqual.js");
-var _state = require("@codemirror/state");
-var _view = require("@codemirror/view");
-var _autocomplete = require("@codemirror/autocomplete");
-var _search = require("@codemirror/search");
-var _commands = require("@codemirror/commands");
-var _lint = require("@codemirror/lint");
-var _language = require("@codemirror/language");
-var _langJavascript = require("@codemirror/lang-javascript");
-var _langHtml = require("@codemirror/lang-html");
-var _langCss = require("@codemirror/lang-css");
-var _langMarkdown = require("@codemirror/lang-markdown");
-var _langJson = require("@codemirror/lang-json");
-var _shell = require("@codemirror/legacy-modes/mode/shell");
-var _yaml = require("@codemirror/legacy-modes/mode/yaml");
-var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
-var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
-var _withDeterministicId = require("@instructure/ui-react-utils/lib/DeterministicIdContext/withDeterministicId.js");
-var _requestAnimationFrame = require("@instructure/ui-dom-utils/lib/requestAnimationFrame.js");
-var _ScreenReaderContent = require("@instructure/ui-a11y-content/lib/ScreenReaderContent");
-var _textDirectionContextConsumer = require("@instructure/ui-i18n/lib/textDirectionContextConsumer.js");
-var _emotion = require("@instructure/emotion");
-var _SearchPanel = _interopRequireDefault(require("./SearchPanel"));
-var _styles = _interopRequireDefault(require("./styles"));
-var _customKeybinding = require("./customKeybinding");
-var _props = require("./props");
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
-var _dec, _dec2, _dec3, _class;
-/*
- * 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 { oneDarkTheme, oneDarkHighlightStyle } from '@codemirror/theme-one-dark'
-/**
----
-category: components
----
-**/
-let SourceCodeEditor = exports.SourceCodeEditor = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyleNew)(_styles.default), _dec3 = (0, _textDirectionContextConsumer.textDirectionContextConsumer)(), _dec(_class = _dec2(_class = _dec3(_class = class SourceCodeEditor extends _react.Component {
-  static displayName = "SourceCodeEditor";
-  static componentId = 'SourceCodeEditor';
-  static allowedProps = _props.allowedProps;
-  static defaultProps = {
-    language: 'jsx',
-    readOnly: false,
-    editable: true,
-    lineNumbers: false,
-    foldGutter: false,
-    highlightActiveLine: false,
-    highlightActiveLineGutter: false,
-    lineWrapping: false,
-    autofocus: false,
-    spellcheck: false,
-    rtlMoveVisually: true,
-    indentOnLoad: false,
-    indentWithTab: false,
-    defaultValue: '',
-    height: 'auto'
-  };
-  _id;
-  ref = null;
-  _containerRef;
-  _editorView;
-  _raf = [];
-  _newSelectionAfterValueChange;
-  handleRef = el => {
-    const {
-      elementRef
-    } = this.props;
-    this.ref = el;
-    if (typeof elementRef === 'function') {
-      elementRef(el);
-    }
-  };
-  handleContainerRef = el => {
-    const {
-      containerRef
-    } = this.props;
-    this._containerRef = el || undefined;
-    if (typeof containerRef === 'function') {
-      containerRef(el);
-    }
-  };
-  addAnimationFrame(callback) {
-    if (typeof callback === 'function') {
-      this._raf.push((0, _requestAnimationFrame.requestAnimationFrame)(callback));
-    }
-  }
-  cancelAnimationFrames() {
-    this._raf.forEach(request => request.cancel());
-    this._raf = [];
-  }
-  focus() {
-    this.addAnimationFrame(() => {
-      this._editorView?.focus();
-    });
-  }
-  get hasFocus() {
-    return this._editorView?.hasFocus;
-  }
-  selectAll() {
-    if (this._editorView) {
-      this.addAnimationFrame(() => {
-        this.dispatchViewSelection({
-          anchor: 0,
-          head: this.currentDocValue?.length
-        });
-      });
-    }
-  }
-  deselectAll() {
-    if (this._editorView) {
-      this.addAnimationFrame(() => {
-        this.dispatchViewSelection({
-          anchor: 0,
-          head: 0
-        });
-      });
-    }
-  }
-  indentCurrentSelection() {
-    this.addAnimationFrame(() => {
-      if (this._editorView) {
-        (0, _commands.indentSelection)({
-          state: this._editorView.state,
-          dispatch: transaction => {
-            this._editorView?.update([transaction]);
-          }
-        });
-      }
-    });
-  }
-  indentAll() {
-    this.addAnimationFrame(() => {
-      if (this._editorView && this.currentDocValue) {
-        this.indentCodeRange(0, this.currentDocValue.length);
-      }
-    });
-  }
-  indentCodeRange(from, to) {
-    this.addAnimationFrame(() => {
-      if (this._editorView && this.currentDocValue) {
-        this.dispatchViewChanges({
-          changes: (0, _language.indentRange)(this._editorView.state, from, to)
-        });
-      }
-    });
-  }
-
-  // Attach state effects
-  dispatchViewEffects(effects) {
-    if (!this._editorView || !effects) return;
-    this._editorView.dispatch({
-      effects
-    });
-  }
-
-  // Dispatch changes to the document
-  dispatchViewChanges({
-    changes,
-    selection,
-    userEvent
-  }) {
-    if (!this._editorView || !changes) return;
-    this._editorView.dispatch({
-      changes,
-      ...(selection ? {
-        selection
-      } : undefined),
-      ...(userEvent ? {
-        userEvent
-      } : undefined)
-    });
-  }
-
-  // Select a portion of the document
-  dispatchViewSelection(selection) {
-    if (!this._editorView || !selection) return;
-    this._editorView.dispatch({
-      selection
-    });
-  }
-  get currentDocValue() {
-    return this._editorView?.state.doc;
-  }
-
-  // when value is passed, the editor should be controlled
-  get isControlled() {
-    return typeof this.props.value === 'string';
-  }
-  constructor(props) {
-    super(props);
-    this._id = props.deterministicId();
-  }
-  componentDidMount() {
-    const {
-      value,
-      defaultValue,
-      autofocus,
-      indentOnLoad
-    } = this.props;
-    this.props.makeStyles?.();
-    const state = _state.EditorState.create({
-      doc: value || defaultValue,
-      extensions: this.extensions
-    });
-    this._editorView = new _view.EditorView({
-      state,
-      parent: this._containerRef
-    });
-
-    // from the a11y team:
-    // axe devtools and other automated a11y tests both flagging this issue,
-    // which can be observed while navigating with keyboard:
-    // Ensure elements that have scrollable content are accessible by keyboard
-    // To solve this problem, you need to fix at least (1) of the following:
-    // Element should have focusable content, Element should be focusable
-    this._editorView.scrollDOM.tabIndex = 0;
-    if (autofocus) {
-      this.focus();
-    }
-    if (indentOnLoad) {
-      this.indentAll();
-    }
-    this.assignAriaLabel();
-  }
-  componentWillUnmount() {
-    this._editorView?.destroy();
-    this.cancelAnimationFrames();
-  }
-  componentDidUpdate(prevProps) {
-    this.props.makeStyles?.();
-    if (this._editorView) {
-      if (this.props.value !== prevProps.value) {
-        this.refreshEditorValue();
-      }
-      if (this.shouldUpdateExtensions(prevProps)) {
-        this.refreshExtensions();
-      }
-    }
-  }
-  shouldUpdateExtensions(prevProps) {
-    const propsToObserve = ['styles',
-    // needed for theme update
-    'themeOverride', 'language', 'readOnly', 'editable', 'lineNumbers', 'highlightActiveLineGutter', 'foldGutter', 'lineWrapping', 'autofocus', 'spellcheck', 'direction', 'dir', 'rtlMoveVisually', 'indentOnLoad', 'indentWithTab', 'indentUnit', 'highlightActiveLine', 'attachment'];
-    for (const prop of propsToObserve) {
-      if (!(0, _deepEqual.deepEqual)(this.props[prop], prevProps[prop])) {
-        return true;
-      }
-    }
-    return false;
-  }
-  get direction() {
-    // comes from the `direction` prop and
-    // falls back to the `dir` prop coming from the bidirectional decorator
-    return this.props.direction || this.props.dir;
-  }
-  get extensions() {
-    const extensions = [...this.baseExtensions,
-    // our custom extensions
-    this.languageExtension, this.onChangeExtension, this.focusListenerExtension, this.announceLineNumberExtension];
-    if (this.themeExtension) {
-      extensions.push(this.themeExtension);
-    }
-    if (this.props.lineNumbers) {
-      extensions.push((0, _view.lineNumbers)());
-    }
-    if (this.props.highlightActiveLine) {
-      extensions.push((0, _view.highlightActiveLine)());
-    }
-    if (this.props.highlightActiveLineGutter) {
-      extensions.push((0, _view.highlightActiveLineGutter)());
-    }
-    if (this.props.foldGutter) {
-      extensions.push((0, _language.foldGutter)());
-    }
-    if (this.props.lineWrapping) {
-      extensions.push(_view.EditorView.lineWrapping);
-    }
-    if (this.props.editable === false) {
-      extensions.push(_view.EditorView.editable.of(false));
-    }
-    if (this.props.readOnly) {
-      extensions.push(_state.EditorState.readOnly.of(true));
-    }
-    if (this.props.spellcheck) {
-      extensions.push(_view.EditorView.contentAttributes.of({
-        spellcheck: 'true'
-      }));
-    }
-    if (this.direction) {
-      extensions.push(_view.EditorView.contentAttributes.of({
-        dir: this.direction
-      }));
-    }
-    if (this.props.indentUnit) {
-      extensions.push(_language.indentUnit.of(this.props.indentUnit));
-    }
-    return extensions;
-  }
-  get baseExtensions() {
-    return [
-    // The extensions are based on codemirrors basic setup from 'codemirror'.
-    // It is recommended by CodeMirror, that if we want to configure
-    // our editor more precisely, we have to copy the source
-    // and adjust it as desired.
-    (0, _view.highlightSpecialChars)(), (0, _commands.history)(), (0, _view.drawSelection)(), (0, _view.dropCursor)(), _state.EditorState.allowMultipleSelections.of(true), (0, _language.syntaxHighlighting)(_language.defaultHighlightStyle, {
-      fallback: true
-    }), (0, _language.bracketMatching)(), (0, _autocomplete.closeBrackets)(), (0, _autocomplete.autocompletion)(), (0, _view.rectangularSelection)(), (0, _view.crosshairCursor)(), (0, _search.highlightSelectionMatches)(), (0, _language.indentOnInput)(), (0, _SearchPanel.default)(this.props.searchConfig), _view.keymap.of(this.keymaps)];
-  }
-  get keymaps() {
-    // TODO: if more keymaps are added, list them in the docs as well (#Command keybinding)
-    const keymaps = [..._autocomplete.closeBracketsKeymap, ...this.commandKeybinding, ..._commands.historyKeymap, ..._language.foldKeymap, ..._autocomplete.completionKeymap, ..._lint.lintKeymap, ...(this.props.searchConfig ? _search.searchKeymap : [])];
-    if (this.props.indentWithTab) {
-      keymaps.push(_commands.indentWithTab);
-    }
-    return keymaps;
-  }
-  get commandKeybinding() {
-    const {
-      rtlMoveVisually
-    } = this.props;
-    if (this.direction === 'rtl' && !rtlMoveVisually) {
-      const overrideableKeys = _customKeybinding.rtlHorizontalArrowKeymap.map(binding => binding.key ? binding.key : binding.mac ? binding.mac : binding);
-      // we have to remove the binding we want to override from the original,
-      // otherwise all will be merged and the defaults will still apply
-      const filteredOriginal = _commands.defaultKeymap.filter(binding => binding.key ? overrideableKeys.indexOf(binding.key) < 0 : binding.mac ? overrideableKeys.indexOf(binding.mac) < 0 : false);
-      return [...filteredOriginal, ..._customKeybinding.rtlHorizontalArrowKeymap];
-    }
-    return _commands.defaultKeymap;
-  }
-  get themeExtension() {
-    const {
-      styles
-    } = this.props;
-    if (!styles?.theme || !styles.highlightStyle) {
-      return undefined;
-    }
-    const theme = _view.EditorView.theme(styles?.theme);
-    const highlightStyle = (0, _language.syntaxHighlighting)(_language.HighlightStyle.define(styles?.highlightStyle));
-
-    // see notes in props.ts
-    // if (darkTheme) {
-    //   theme = oneDarkTheme
-    //   highlightStyle = syntaxHighlighting(oneDarkHighlightStyle)
-    // }
-
-    return [theme, highlightStyle];
-  }
-  get languageExtension() {
-    const {
-      language
-    } = this.props;
-    switch (language) {
-      case 'json':
-        return (0, _langJson.json)();
-      case 'js':
-      case 'jsx':
-      case 'javascript':
-        return (0, _langJavascript.javascript)({
-          jsx: true,
-          typescript: true
-        });
-      case 'html':
-        return (0, _langHtml.html)({
-          matchClosingTags: true,
-          autoCloseTags: true
-        });
-      case 'css':
-        return (0, _langCss.css)();
-      case 'markdown':
-        return (0, _langMarkdown.markdown)();
-      case 'sh':
-      case 'shell':
-      case 'bash':
-        // ????
-        return _language.StreamLanguage.define(_shell.shell);
-      case 'yml':
-      case 'yaml':
-        return _language.StreamLanguage.define(_yaml.yaml);
-      default:
-        return (0, _langJavascript.javascript)({
-          jsx: true,
-          typescript: true
-        });
-    }
-  }
-  callOnChangeHandler(newValue) {
-    const {
-      onChange,
-      value
-    } = this.props;
-    this.addAnimationFrame(() => {
-      if (typeof onChange === 'function' && newValue !== value) {
-        onChange(newValue);
-      }
-    });
-  }
-  get onChangeExtension() {
-    return _state.EditorState.changeFilter.of(transaction => {
-      if (!this._editorView) {
-        return false;
-      }
-      if (transaction.docChanged) {
-        const newDoc = transaction.newDoc.toString();
-        if (this.isControlled) {
-          // the value will be changed by the onChange handler,
-          // refreshEditorValue has to run first
-          if (newDoc !== this.props.value) {
-            this._newSelectionAfterValueChange = transaction.selection;
-            this.cancelAnimationFrames();
-            this.callOnChangeHandler(newDoc);
-            return false;
-          } else {
-            return true;
-          }
-        } else {
-          this.callOnChangeHandler(newDoc);
-        }
-      }
-      return true;
-    });
-  }
-  get focusListenerExtension() {
-    const {
-      onFocus,
-      onBlur
-    } = this.props;
-    return _view.EditorView.updateListener.of(update => {
-      if (update.focusChanged && this._editorView) {
-        if (this.hasFocus) {
-          if (typeof onFocus === 'function') {
-            onFocus();
-          }
-        } else {
-          if (typeof onBlur === 'function') {
-            onBlur();
-          }
-        }
-      }
-    });
-  }
-  get announceLineNumberExtension() {
-    return _state.EditorState.transactionExtender.of(tr => {
-      const selection = tr.selection;
-      const oldSelection = tr.startState.selection.main;
-      if (selection && selection.main.empty && oldSelection.empty) {
-        const oldLine = tr.startState.doc.lineAt(oldSelection.head);
-        const newLine = tr.newDoc.lineAt(selection.main.head);
-        if (oldLine.number != newLine.number) return {
-          effects: _view.EditorView.announce.of(tr.startState.phrase('line ') + newLine.number + '.')
-        };
-      }
-      return null;
-    });
-  }
-  refreshExtensions() {
-    this.dispatchViewEffects(_state.StateEffect.reconfigure.of(this.extensions));
-  }
-  refreshEditorValue() {
-    if (!this._editorView) return;
-    const {
-      value
-    } = this.props;
-    const currentValue = this._editorView.state.doc.toString();
-    if (typeof value !== 'undefined' && currentValue !== value) {
-      let userEvent;
-      const lengthDiff = value.length - currentValue.length;
-
-      // setting user events are needed for the autocomplete to work
-      // (only these 2 events, autocomplete doesn't work on paste, etc.)
-      if (lengthDiff === 1) {
-        userEvent = 'input.type';
-      } else if (lengthDiff === -1) {
-        userEvent = 'delete.backward';
-      }
-      const scrollTop = this._editorView.scrollDOM.scrollTop;
-      this.dispatchViewChanges({
-        changes: {
-          from: 0,
-          to: currentValue.length,
-          insert: value || ''
-        },
-        selection: this._newSelectionAfterValueChange,
-        userEvent: userEvent
-      });
-
-      // Restore scroll position after CodeMirror updates the DOM
-      this.addAnimationFrame(() => {
-        if (this._editorView) {
-          this._editorView.scrollDOM.scrollTop = scrollTop;
-        }
-      });
-      this._newSelectionAfterValueChange = undefined;
-    }
-    if (this.props.indentOnLoad) {
-      this.indentAll();
-    }
-  }
-  assignAriaLabel = () => {
-    if (this._containerRef) {
-      const editorDiv = this._containerRef.querySelector('[role="textbox"]');
-      if (editorDiv) {
-        editorDiv.setAttribute('aria-labelledby', `${this._id}`);
-      }
-    }
-  };
-  render() {
-    const {
-      label,
-      styles,
-      ...restProps
-    } = this.props;
-    return (0, _jsxRuntime.jsx)("div", {
-      "data-cid": "SourceCodeEditor",
-      ref: this.handleRef,
-      css: styles?.codeEditor,
-      ...(0, _passthroughProps.passthroughProps)((0, _omitProps.omitProps)(restProps, SourceCodeEditor.allowedProps)),
-      children: (0, _jsxRuntime.jsxs)("label", {
-        css: styles?.label,
-        id: this._id,
-        children: [(0, _jsxRuntime.jsx)(_ScreenReaderContent.ScreenReaderContent, {
-          children: label
-        }), (0, _jsxRuntime.jsx)("div", {
-          ref: this.handleContainerRef,
-          css: styles?.codeEditorContainer
-        })]
-      })
-    });
-  }
-}) || _class) || _class) || _class);
-var _default = exports.default = SourceCodeEditor;