@atlaskit/editor-plugin-code-block 0.1.0

package/dist/esm/toolbar.js

@@ -0,0 +1,121 @@
+import { defineMessages } from 'react-intl-next';
+import commonMessages, { codeBlockButtonMessages } from '@atlaskit/editor-common/messages';
+import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
+import CopyIcon from '@atlaskit/icon/glyph/copy';
+import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
+import { changeLanguage, copyContentToClipboard, removeCodeBlock, resetCopiedState } from './actions';
+import { createLanguageList, DEFAULT_LANGUAGES, getLanguageIdentifier } from './language-list';
+import { pluginKey } from './plugin-key';
+import { provideVisualFeedbackForCopyButton, removeVisualFeedbackForCopyButton } from './pm-plugins/codeBlockCopySelectionPlugin';
+export var messages = defineMessages({
+  selectLanguage: {
+    id: 'fabric.editor.selectLanguage',
+    defaultMessage: 'Select language',
+    description: 'Code blocks display software code. A prompt to select the software language the code is written in.'
+  }
+});
+var languageList = createLanguageList(DEFAULT_LANGUAGES);
+export var getToolbarConfig = function getToolbarConfig() {
+  var allowCopyToClipboard = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+  var api = arguments.length > 1 ? arguments[1] : undefined;
+  return function (state, _ref) {
+    var _api$decorations$acti, _api$analytics, _codeBlockState$pos, _node$attrs;
+    var formatMessage = _ref.formatMessage;
+    var _ref2 = (_api$decorations$acti = api === null || api === void 0 ? void 0 : api.decorations.actions) !== null && _api$decorations$acti !== void 0 ? _api$decorations$acti : {},
+      hoverDecoration = _ref2.hoverDecoration;
+    var editorAnalyticsAPI = api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
+    var codeBlockState = pluginKey.getState(state);
+    var pos = (_codeBlockState$pos = codeBlockState === null || codeBlockState === void 0 ? void 0 : codeBlockState.pos) !== null && _codeBlockState$pos !== void 0 ? _codeBlockState$pos : null;
+    if (!codeBlockState || pos === null) {
+      return;
+    }
+    var node = state.doc.nodeAt(pos);
+    var nodeType = state.schema.nodes.codeBlock;
+    if ((node === null || node === void 0 ? void 0 : node.type) !== nodeType) {
+      return;
+    }
+    var language = node === null || node === void 0 || (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.language;
+    var options = languageList.map(function (lang) {
+      return {
+        label: lang.name,
+        value: getLanguageIdentifier(lang),
+        alias: lang.alias
+      };
+    });
+
+    // If language is not undefined search for it in the value and then search in the aliases
+    var defaultValue = language ? options.find(function (option) {
+      return option.value === language;
+    }) || options.find(function (option) {
+      return option.alias.includes(language);
+    }) : null;
+    var languageSelect = {
+      id: 'editor.codeBlock.languageOptions',
+      type: 'select',
+      selectType: 'list',
+      onChange: function onChange(option) {
+        return changeLanguage(editorAnalyticsAPI)(option.value);
+      },
+      defaultValue: defaultValue,
+      placeholder: formatMessage(messages.selectLanguage),
+      options: options,
+      filterOption: languageListFilter
+    };
+    var separator = {
+      type: 'separator'
+    };
+    var copyToClipboardItems = !allowCopyToClipboard ? [] : [{
+      id: 'editor.codeBlock.copy',
+      type: 'button',
+      appearance: 'subtle',
+      icon: CopyIcon,
+      // note: copyContentToClipboard contains logic that also removes the
+      // visual feedback for the copy button
+      onClick: copyContentToClipboard,
+      title: formatMessage(codeBlockState.contentCopied ? codeBlockButtonMessages.copiedCodeToClipboard : codeBlockButtonMessages.copyCodeToClipboard),
+      onMouseEnter: provideVisualFeedbackForCopyButton,
+      // note: resetCopiedState contains logic that also removes the
+      // visual feedback for the copy button
+      onMouseLeave: resetCopiedState,
+      onFocus: provideVisualFeedbackForCopyButton,
+      onBlur: removeVisualFeedbackForCopyButton,
+      hideTooltipOnClick: false,
+      disabled: codeBlockState.isNodeSelected,
+      tabIndex: null
+    }, separator];
+    var deleteButton = {
+      id: 'editor.codeBlock.delete',
+      type: 'button',
+      appearance: 'danger',
+      icon: RemoveIcon,
+      onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, true),
+      onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, false),
+      onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, true),
+      onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, false),
+      onClick: removeCodeBlock,
+      title: formatMessage(commonMessages.remove),
+      tabIndex: null
+    };
+    return {
+      title: 'CodeBlock floating controls',
+      getDomRef: function getDomRef(view) {
+        return findDomRefAtPos(pos, view.domAtPos.bind(view));
+      },
+      nodeType: nodeType,
+      items: [languageSelect, separator].concat(copyToClipboardItems, [deleteButton]),
+      scrollable: true
+    };
+  };
+};
+
+/**
+ * Filters language list based on both name and alias properties.
+ */
+export var languageListFilter = function languageListFilter(option, rawInput) {
+  var _ref3 = option,
+    data = _ref3.data;
+  var searchString = rawInput.toLowerCase();
+  return data.label.toLowerCase().includes(searchString) || data.alias.some(function (alias) {
+    return alias.toLowerCase() === searchString;
+  });
+};

package/dist/esm/transform-to-code-block.js

@@ -0,0 +1,77 @@
+import { GapCursorSelection } from '@atlaskit/editor-common/selection';
+import { mapSlice, timestampToString } from '@atlaskit/editor-common/utils';
+import { Fragment } from '@atlaskit/editor-prosemirror/model';
+import { TextSelection } from '@atlaskit/editor-prosemirror/state';
+export function transformToCodeBlockAction(state, start, attrs) {
+  var startOfCodeBlockText = state.selection.$from;
+  var endPosition = state.selection.empty && !(state.selection instanceof GapCursorSelection) ? startOfCodeBlockText.end() : state.selection.$to.pos;
+  var startLinePosition = startOfCodeBlockText.start();
+  //when cmd+A is used to select the content. start position should be 0.
+  var parentStartPosition = startOfCodeBlockText.depth === 0 ? 0 : startOfCodeBlockText.before();
+  var contentSlice = state.doc.slice(startOfCodeBlockText.pos, endPosition);
+  var codeBlockSlice = mapSlice(contentSlice, function (node, parent, index) {
+    if (node.type === state.schema.nodes.hardBreak) {
+      return state.schema.text('\n');
+    }
+    if (node.isText) {
+      return node.mark([]);
+    }
+    if (node.isInline) {
+      // Convert dates
+      if (node.attrs.timestamp) {
+        return state.schema.text(timestampToString(node.attrs.timestamp, null));
+      }
+      // Convert links
+      if (node.attrs.url) {
+        return state.schema.text(node.attrs.url);
+      }
+      return node.attrs.text ? state.schema.text(node.attrs.text) : null;
+    }
+
+    // if the current node is the last child of the Slice exit early to prevent
+    // adding additional line breaks
+    if (contentSlice.content.childCount - 1 === index) {
+      return node.content;
+    }
+
+    //useful to decide whether to append line breaks when the content has list items.
+    var isParentLastChild = parent && contentSlice.content.childCount - 1 === index;
+
+    // add line breaks at the end of each paragraph to mimic layout of selected content
+    // do not add line breaks when the 'paragraph' parent is last child.
+    if (node.content.childCount && node.type === state.schema.nodes.paragraph && !isParentLastChild) {
+      return node.content.append(Fragment.from(state.schema.text('\n\n')));
+    }
+    return node.content.childCount ? node.content : null;
+  });
+  var tr = state.tr;
+
+  // Replace current block node
+  var startMapped = startLinePosition === start ? parentStartPosition : start;
+  var codeBlock = state.schema.nodes.codeBlock;
+  var codeBlockNode = codeBlock.createChecked(attrs, codeBlockSlice.content);
+  tr.replaceWith(startMapped, Math.min(endPosition, tr.doc.content.size), codeBlockNode);
+
+  // Reposition cursor when inserting into layouts or table headers
+  var mapped = tr.doc.resolve(tr.mapping.map(startMapped) + 1);
+  var selection = TextSelection.findFrom(mapped, state.selection instanceof GapCursorSelection ? -1 : 1, true);
+  if (selection) {
+    return tr.setSelection(selection);
+  }
+  return tr.setSelection(TextSelection.create(tr.doc, Math.min(start + startOfCodeBlockText.node().nodeSize - 1, tr.doc.content.size)));
+}
+export function isConvertableToCodeBlock(state) {
+  // Before a document is loaded, there is no selection.
+  if (!state.selection) {
+    return false;
+  }
+  var $from = state.selection.$from;
+  var node = $from.parent;
+  if (!node.isTextblock || node.type === state.schema.nodes.codeBlock) {
+    return false;
+  }
+  var parentDepth = $from.depth - 1;
+  var parentNode = $from.node(parentDepth);
+  var index = $from.index(parentDepth);
+  return parentNode.canReplaceWith(index, index + 1, state.schema.nodes.codeBlock);
+}

package/dist/esm/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/ui/class-names.js

@@ -0,0 +1,9 @@
+import { CodeBlockSharedCssClassName } from '@atlaskit/editor-common/styles';
+export var codeBlockClassNames = {
+  container: CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER,
+  start: CodeBlockSharedCssClassName.CODEBLOCK_START,
+  end: CodeBlockSharedCssClassName.CODEBLOCK_END,
+  contentWrapper: CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER,
+  gutter: CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER,
+  content: CodeBlockSharedCssClassName.CODEBLOCK_CONTENT
+};

package/dist/esm/utils.js

@@ -0,0 +1,4 @@
+export { findCodeBlock, transformSliceToJoinAdjacentCodeBlocks, transformSingleLineCodeBlockToCodeMark } from '@atlaskit/editor-common/transforms';
+export function getCursor(selection) {
+  return selection.$cursor || undefined;
+}

package/dist/types/actions.d.ts

@@ -0,0 +1,18 @@
+import type { EditorAnalyticsAPI, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import type { Command } from '@atlaskit/editor-common/types';
+import type { EditorState } from '@atlaskit/editor-prosemirror/state';
+export declare const removeCodeBlock: Command;
+export declare const changeLanguage: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => (language: string) => Command;
+export declare const copyContentToClipboard: Command;
+export declare const resetCopiedState: Command;
+export declare const ignoreFollowingMutations: Command;
+export declare const resetShouldIgnoreFollowingMutations: Command;
+/**
+ * This function creates a new transaction that inserts a code block,
+ * if there is text selected it will wrap the current selection if not it will
+ * append the codeblock to the end of the document.
+ */
+export declare function createInsertCodeBlockTransaction({ state, }: {
+    state: EditorState;
+}): import("prosemirror-state").Transaction;
+export declare function insertCodeBlockWithAnalytics(inputMethod: INPUT_METHOD, analyticsAPI?: EditorAnalyticsAPI): Command;

package/dist/types/ide-ux/bracket-handling.d.ts

@@ -0,0 +1,12 @@
+export declare const BRACKET_MAP: {
+    '{': string;
+    '[': string;
+    '(': string;
+};
+export type BracketMapKey = keyof typeof BRACKET_MAP;
+export declare const shouldAutoCloseBracket: (before: string, after: string) => boolean;
+export declare const getAutoClosingBracketInfo: (before: string, after: string) => {
+    left: "{" | "[" | "(" | undefined;
+    right: string | undefined;
+    hasTrailingMatchingBracket: boolean;
+};

package/dist/types/ide-ux/commands.d.ts

@@ -0,0 +1,7 @@
+import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
+import type { CommandDispatch } from '@atlaskit/editor-common/types';
+import type { EditorState } from '@atlaskit/editor-prosemirror/state';
+export declare const indent: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => (state: EditorState, dispatch?: CommandDispatch) => boolean;
+export declare const outdent: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => (state: EditorState, dispatch?: CommandDispatch) => boolean;
+export declare function insertIndent(state: EditorState, dispatch: CommandDispatch): boolean;
+export declare function insertNewlineWithIndent(state: EditorState, dispatch?: CommandDispatch): boolean;

package/dist/types/ide-ux/line-handling.d.ts

@@ -0,0 +1,25 @@
+import type { EditorState } from '@atlaskit/editor-prosemirror/state';
+export declare const isSelectionEntirelyInsideCodeBlock: (state: EditorState) => boolean;
+export declare const isCursorInsideCodeBlock: (state: EditorState) => boolean;
+export declare const getStartOfCurrentLine: (state: EditorState) => {
+    text: string;
+    pos: number;
+};
+export declare const getEndOfCurrentLine: (state: EditorState) => {
+    text: string;
+    pos: number;
+};
+export declare function getLinesFromSelection(state: EditorState): {
+    text: string;
+    start: number;
+    end: number;
+};
+export declare const forEachLine: (text: string, callback: (line: string, offset: number) => void) => void;
+export declare const getLineInfo: (line: string) => {
+    indentToken: {
+        token: string;
+        size: number;
+        regex: RegExp;
+    };
+    indentText: string;
+};

package/dist/types/ide-ux/paired-character-handling.d.ts

@@ -0,0 +1,2 @@
+export declare const isCursorBeforeClosingCharacter: (after: string) => boolean;
+export declare const isClosingCharacter: (text: string) => boolean;

package/dist/types/ide-ux/quote-handling.d.ts

@@ -0,0 +1,12 @@
+export declare const QUOTE_MAP: {
+    "'": string;
+    '"': string;
+    '`': string;
+};
+export type QuoteMapKey = keyof typeof QUOTE_MAP;
+export declare const shouldAutoCloseQuote: (before: string, after: string) => boolean;
+export declare const getAutoClosingQuoteInfo: (before: string, after: string) => {
+    left: "'" | "\"" | "`" | undefined;
+    right: string | undefined;
+    hasTrailingMatchingQuote: boolean;
+};

package/dist/types/index.d.ts

@@ -0,0 +1,3 @@
+export { default as codeBlockPlugin } from './plugin';
+export type { CodeBlockPlugin } from './plugin';
+export type { CodeBlockOptions } from './types';