-
-
-
-
-
-
+ return (
+
+
+ handleChange(code)}
+ highlight={(code) => highlight(code, language)}
+ padding={10}
+ preClassName={`code-block-wrapper ${data.style} language-${data.language}`}
+ />
+
+
+
- );
- };
-}
+
+ );
+};
export default withBlockExtensions(CodeBlockEdit);
diff --git a/src/components/Block/Sidebar.jsx b/src/components/Block/Sidebar.jsx
deleted file mode 100644
index 2126cbf..0000000
--- a/src/components/Block/Sidebar.jsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-
-import Data from './Data';
-
-const CodeBlockSidebar = (props) => {
- return
;
-};
-
-export default CodeBlockSidebar;
diff --git a/src/components/Block/schema.js b/src/components/Block/schema.js
index 3314dfa..211ea32 100644
--- a/src/components/Block/schema.js
+++ b/src/components/Block/schema.js
@@ -35,8 +35,14 @@ export const codeSchema = (props) => {
const defaultStyle = config.blocks?.blocksConfig?.codeBlock?.defaultStyle;
const availableLanguages = () => {
- const languages = config.settings.codeBlock.languages || [];
- return languages.map((item) => [item[0], item[1]]);
+ const allLanguages = config.settings.codeBlock.languages || {};
+ const languages = Array.from(
+ Object.entries(allLanguages),
+ ([key, value]) => {
+ return [key, value.label];
+ },
+ );
+ return languages;
};
const availableStyles = () => {
diff --git a/src/components/Editor/Editor.tsx b/src/components/Editor/Editor.tsx
new file mode 100644
index 0000000..1e2f859
--- /dev/null
+++ b/src/components/Editor/Editor.tsx
@@ -0,0 +1,642 @@
+import * as React from 'react';
+
+type Padding
= T | { top?: T; right?: T; bottom?: T; left?: T };
+
+type Props = React.HTMLAttributes & {
+ // Props for the component
+ value: string;
+ onValueChange: (value: string) => void;
+ highlight: (value: string) => string | React.ReactNode;
+ tabSize: number;
+ insertSpaces: boolean;
+ ignoreTabKey: boolean;
+ padding: Padding;
+ style?: React.CSSProperties;
+
+ // Props for the textarea
+ textareaId?: string;
+ textareaClassName?: string;
+ autoFocus?: boolean;
+ disabled?: boolean;
+ form?: string;
+ maxLength?: number;
+ minLength?: number;
+ name?: string;
+ placeholder?: string;
+ readOnly?: boolean;
+ required?: boolean;
+ onClick?: React.MouseEventHandler;
+ onFocus?: React.FocusEventHandler;
+ onBlur?: React.FocusEventHandler;
+ onKeyUp?: React.KeyboardEventHandler;
+ onKeyDown?: React.KeyboardEventHandler;
+
+ // Props for the hightlighted code’s pre element
+ preClassName?: string;
+};
+
+type State = {
+ capture: boolean;
+};
+
+type Record = {
+ value: string;
+ selectionStart: number;
+ selectionEnd: number;
+};
+
+type History = {
+ stack: (Record & { timestamp: number })[];
+ offset: number;
+};
+
+const KEYCODE_Y = 89;
+const KEYCODE_Z = 90;
+const KEYCODE_M = 77;
+const KEYCODE_PARENS = 57;
+const KEYCODE_BRACKETS = 219;
+const KEYCODE_QUOTE = 222;
+const KEYCODE_BACK_QUOTE = 192;
+
+const HISTORY_LIMIT = 100;
+const HISTORY_TIME_GAP = 3000;
+
+const isWindows =
+ typeof window !== 'undefined' &&
+ 'navigator' in window &&
+ /Win/i.test(navigator.platform);
+const isMacLike =
+ typeof window !== 'undefined' &&
+ 'navigator' in window &&
+ /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform);
+
+const className = 'npm__react-simple-code-editor__textarea';
+
+const cssText = /* CSS */ `
+/**
+ * Reset the text fill color so that placeholder is visible
+ */
+.${className}:empty {
+ -webkit-text-fill-color: inherit !important;
+}
+/**
+ * Hack to apply on some CSS on IE10 and IE11
+ */
+@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+ /**
+ * IE doesn't support '-webkit-text-fill-color'
+ * So we use 'color: transparent' to make the text transparent on IE
+ * Unlike other browsers, it doesn't affect caret color in IE
+ */
+ .${className} {
+ color: transparent !important;
+ }
+ .${className}::selection {
+ background-color: #accef7 !important;
+ color: transparent !important;
+ }
+}
+`;
+
+export default class Editor extends React.Component {
+ static defaultProps = {
+ tabSize: 2,
+ insertSpaces: true,
+ ignoreTabKey: false,
+ padding: 0,
+ };
+
+ state = {
+ capture: true,
+ };
+
+ componentDidMount() {
+ this._recordCurrentState();
+ }
+
+ private _recordCurrentState = () => {
+ const input = this._input;
+
+ if (!input) return;
+
+ // Save current state of the input
+ const { value, selectionStart, selectionEnd } = input;
+
+ this._recordChange({
+ value,
+ selectionStart,
+ selectionEnd,
+ });
+ };
+
+ private _getLines = (text: string, position: number) =>
+ text.substring(0, position).split('\n');
+
+ private _recordChange = (record: Record, overwrite: boolean = false) => {
+ const { stack, offset } = this._history;
+
+ if (stack.length && offset > -1) {
+ // When something updates, drop the redo operations
+ this._history.stack = stack.slice(0, offset + 1);
+
+ // Limit the number of operations to 100
+ const count = this._history.stack.length;
+
+ if (count > HISTORY_LIMIT) {
+ const extras = count - HISTORY_LIMIT;
+
+ this._history.stack = stack.slice(extras, count);
+ this._history.offset = Math.max(this._history.offset - extras, 0);
+ }
+ }
+
+ const timestamp = Date.now();
+
+ if (overwrite) {
+ const last = this._history.stack[this._history.offset];
+
+ if (last && timestamp - last.timestamp < HISTORY_TIME_GAP) {
+ // A previous entry exists and was in short interval
+
+ // Match the last word in the line
+ const re = /[^a-z0-9]([a-z0-9]+)$/i;
+
+ // Get the previous line
+ const previous = this._getLines(last.value, last.selectionStart)
+ .pop()
+ ?.match(re);
+
+ // Get the current line
+ const current = this._getLines(record.value, record.selectionStart)
+ .pop()
+ ?.match(re);
+
+ if (previous?.[1] && current?.[1]?.startsWith(previous[1])) {
+ // The last word of the previous line and current line match
+ // Overwrite previous entry so that undo will remove whole word
+ this._history.stack[this._history.offset] = { ...record, timestamp };
+
+ return;
+ }
+ }
+ }
+
+ // Add the new operation to the stack
+ this._history.stack.push({ ...record, timestamp });
+ this._history.offset++;
+ };
+
+ private _updateInput = (record: Record) => {
+ const input = this._input;
+
+ if (!input) return;
+
+ // Update values and selection state
+ input.value = record.value;
+ input.selectionStart = record.selectionStart;
+ input.selectionEnd = record.selectionEnd;
+
+ this.props.onValueChange(record.value);
+ };
+
+ private _applyEdits = (record: Record) => {
+ // Save last selection state
+ const input = this._input;
+ const last = this._history.stack[this._history.offset];
+
+ if (last && input) {
+ this._history.stack[this._history.offset] = {
+ ...last,
+ selectionStart: input.selectionStart,
+ selectionEnd: input.selectionEnd,
+ };
+ }
+
+ // Save the changes
+ this._recordChange(record);
+ this._updateInput(record);
+ };
+
+ private _undoEdit = () => {
+ const { stack, offset } = this._history;
+
+ // Get the previous edit
+ const record = stack[offset - 1];
+
+ if (record) {
+ // Apply the changes and update the offset
+ this._updateInput(record);
+ this._history.offset = Math.max(offset - 1, 0);
+ }
+ };
+
+ private _redoEdit = () => {
+ const { stack, offset } = this._history;
+
+ // Get the next edit
+ const record = stack[offset + 1];
+
+ if (record) {
+ // Apply the changes and update the offset
+ this._updateInput(record);
+ this._history.offset = Math.min(offset + 1, stack.length - 1);
+ }
+ };
+
+ private _handleKeyDown = (e: React.KeyboardEvent) => {
+ const { tabSize, insertSpaces, ignoreTabKey, onKeyDown } = this.props;
+
+ if (onKeyDown) {
+ onKeyDown(e);
+
+ if (e.defaultPrevented) {
+ return;
+ }
+ }
+
+ if (e.key === 'Escape') {
+ e.currentTarget.blur();
+ }
+
+ const { value, selectionStart, selectionEnd } = e.currentTarget;
+
+ const tabCharacter = (insertSpaces ? ' ' : '\t').repeat(tabSize);
+
+ if (e.key === 'Tab' && !ignoreTabKey && this.state.capture) {
+ // Prevent focus change
+ e.preventDefault();
+
+ if (e.shiftKey) {
+ // Unindent selected lines
+ const linesBeforeCaret = this._getLines(value, selectionStart);
+ const startLine = linesBeforeCaret.length - 1;
+ const endLine = this._getLines(value, selectionEnd).length - 1;
+ const nextValue = value
+ .split('\n')
+ .map((line, i) => {
+ if (
+ i >= startLine &&
+ i <= endLine &&
+ line.startsWith(tabCharacter)
+ ) {
+ return line.substring(tabCharacter.length);
+ }
+
+ return line;
+ })
+ .join('\n');
+
+ if (value !== nextValue) {
+ const startLineText = linesBeforeCaret[startLine];
+
+ this._applyEdits({
+ value: nextValue,
+ // Move the start cursor if first line in selection was modified
+ // It was modified only if it started with a tab
+ selectionStart: startLineText?.startsWith(tabCharacter)
+ ? selectionStart - tabCharacter.length
+ : selectionStart,
+ // Move the end cursor by total number of characters removed
+ selectionEnd: selectionEnd - (value.length - nextValue.length),
+ });
+ }
+ } else if (selectionStart !== selectionEnd) {
+ // Indent selected lines
+ const linesBeforeCaret = this._getLines(value, selectionStart);
+ const startLine = linesBeforeCaret.length - 1;
+ const endLine = this._getLines(value, selectionEnd).length - 1;
+ const startLineText = linesBeforeCaret[startLine];
+
+ this._applyEdits({
+ value: value
+ .split('\n')
+ .map((line, i) => {
+ if (i >= startLine && i <= endLine) {
+ return tabCharacter + line;
+ }
+
+ return line;
+ })
+ .join('\n'),
+ // Move the start cursor by number of characters added in first line of selection
+ // Don't move it if it there was no text before cursor
+ selectionStart:
+ startLineText && /\S/.test(startLineText)
+ ? selectionStart + tabCharacter.length
+ : selectionStart,
+ // Move the end cursor by total number of characters added
+ selectionEnd:
+ selectionEnd + tabCharacter.length * (endLine - startLine + 1),
+ });
+ } else {
+ const updatedSelection = selectionStart + tabCharacter.length;
+
+ this._applyEdits({
+ // Insert tab character at caret
+ value:
+ value.substring(0, selectionStart) +
+ tabCharacter +
+ value.substring(selectionEnd),
+ // Update caret position
+ selectionStart: updatedSelection,
+ selectionEnd: updatedSelection,
+ });
+ }
+ } else if (e.key === 'Backspace') {
+ const hasSelection = selectionStart !== selectionEnd;
+ const textBeforeCaret = value.substring(0, selectionStart);
+
+ if (textBeforeCaret.endsWith(tabCharacter) && !hasSelection) {
+ // Prevent default delete behaviour
+ e.preventDefault();
+
+ const updatedSelection = selectionStart - tabCharacter.length;
+
+ this._applyEdits({
+ // Remove tab character at caret
+ value:
+ value.substring(0, selectionStart - tabCharacter.length) +
+ value.substring(selectionEnd),
+ // Update caret position
+ selectionStart: updatedSelection,
+ selectionEnd: updatedSelection,
+ });
+ }
+ } else if (e.key === 'Enter') {
+ // Ignore selections
+ if (selectionStart === selectionEnd) {
+ // Get the current line
+ const line = this._getLines(value, selectionStart).pop();
+ const matches = line?.match(/^\s+/);
+
+ if (matches?.[0]) {
+ e.preventDefault();
+
+ // Preserve indentation on inserting a new line
+ const indent = '\n' + matches[0];
+ const updatedSelection = selectionStart + indent.length;
+
+ this._applyEdits({
+ // Insert indentation character at caret
+ value:
+ value.substring(0, selectionStart) +
+ indent +
+ value.substring(selectionEnd),
+ // Update caret position
+ selectionStart: updatedSelection,
+ selectionEnd: updatedSelection,
+ });
+ }
+ }
+ } else if (
+ e.keyCode === KEYCODE_PARENS ||
+ e.keyCode === KEYCODE_BRACKETS ||
+ e.keyCode === KEYCODE_QUOTE ||
+ e.keyCode === KEYCODE_BACK_QUOTE
+ ) {
+ let chars;
+
+ if (e.keyCode === KEYCODE_PARENS && e.shiftKey) {
+ chars = ['(', ')'];
+ } else if (e.keyCode === KEYCODE_BRACKETS) {
+ if (e.shiftKey) {
+ chars = ['{', '}'];
+ } else {
+ chars = ['[', ']'];
+ }
+ } else if (e.keyCode === KEYCODE_QUOTE) {
+ if (e.shiftKey) {
+ chars = ['"', '"'];
+ } else {
+ chars = ["'", "'"];
+ }
+ } else if (e.keyCode === KEYCODE_BACK_QUOTE && !e.shiftKey) {
+ chars = ['`', '`'];
+ }
+
+ // If text is selected, wrap them in the characters
+ if (selectionStart !== selectionEnd && chars) {
+ e.preventDefault();
+
+ this._applyEdits({
+ value:
+ value.substring(0, selectionStart) +
+ chars[0] +
+ value.substring(selectionStart, selectionEnd) +
+ chars[1] +
+ value.substring(selectionEnd),
+ // Update caret position
+ selectionStart,
+ selectionEnd: selectionEnd + 2,
+ });
+ }
+ } else if (
+ (isMacLike
+ ? // Trigger undo with ⌘+Z on Mac
+ e.metaKey && e.keyCode === KEYCODE_Z
+ : // Trigger undo with Ctrl+Z on other platforms
+ e.ctrlKey && e.keyCode === KEYCODE_Z) &&
+ !e.shiftKey &&
+ !e.altKey
+ ) {
+ e.preventDefault();
+
+ this._undoEdit();
+ } else if (
+ (isMacLike
+ ? // Trigger redo with ⌘+Shift+Z on Mac
+ e.metaKey && e.keyCode === KEYCODE_Z && e.shiftKey
+ : isWindows
+ ? // Trigger redo with Ctrl+Y on Windows
+ e.ctrlKey && e.keyCode === KEYCODE_Y
+ : // Trigger redo with Ctrl+Shift+Z on other platforms
+ e.ctrlKey && e.keyCode === KEYCODE_Z && e.shiftKey) &&
+ !e.altKey
+ ) {
+ e.preventDefault();
+
+ this._redoEdit();
+ } else if (
+ e.keyCode === KEYCODE_M &&
+ e.ctrlKey &&
+ (isMacLike ? e.shiftKey : true)
+ ) {
+ e.preventDefault();
+
+ // Toggle capturing tab key so users can focus away
+ this.setState((state) => ({
+ capture: !state.capture,
+ }));
+ }
+ };
+
+ private _handleChange = (e: React.ChangeEvent) => {
+ const { value, selectionStart, selectionEnd } = e.currentTarget;
+
+ this._recordChange(
+ {
+ value,
+ selectionStart,
+ selectionEnd,
+ },
+ true,
+ );
+
+ this.props.onValueChange(value);
+ };
+
+ private _history: History = {
+ stack: [],
+ offset: -1,
+ };
+
+ private _input: HTMLTextAreaElement | null = null;
+
+ get session() {
+ return {
+ history: this._history,
+ };
+ }
+
+ set session(session: { history: History }) {
+ this._history = session.history;
+ }
+
+ render() {
+ const {
+ value,
+ style,
+ padding,
+ highlight,
+ textareaId,
+ textareaClassName,
+ autoFocus,
+ disabled,
+ form,
+ maxLength,
+ minLength,
+ name,
+ placeholder,
+ readOnly,
+ required,
+ onClick,
+ onFocus,
+ onBlur,
+ onKeyUp,
+ /* eslint-disable @typescript-eslint/no-unused-vars */
+ onKeyDown,
+ onValueChange,
+ tabSize,
+ insertSpaces,
+ ignoreTabKey,
+ /* eslint-enable @typescript-eslint/no-unused-vars */
+ preClassName,
+ ...rest
+ } = this.props;
+
+ const contentStyle = {
+ paddingTop: typeof padding === 'object' ? padding.top : padding,
+ paddingRight: typeof padding === 'object' ? padding.right : padding,
+ paddingBottom: typeof padding === 'object' ? padding.bottom : padding,
+ paddingLeft: typeof padding === 'object' ? padding.left : padding,
+ };
+
+ const highlighted = highlight(value);
+
+ return (
+
+
' } }
+ : { children: highlighted })}
+ />
+