@limetech/lime-elements 37.50.2 → 37.51.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  const index = require('./index-d1052409.js');
6
6
  const randomString = require('./random-string-c8445652.js');
7
7
 
8
- const textEditorCss = "@charset \"UTF-8\";:host{--mdc-theme-primary:var(\n --lime-primary-color,\n rgb(var(--color-teal-default))\n );--mdc-theme-secondary:var(\n --lime-secondary-color,\n rgb(var(--contrast-1100))\n );--mdc-theme-on-primary:var(\n --lime-on-primary-color,\n rgb(var(--contrast-100))\n );--mdc-theme-on-secondary:var(\n --lime-on-secondary-color,\n rgb(var(--contrast-100))\n );--mdc-theme-text-disabled-on-background:var(\n --lime-text-disabled-on-background-color,\n rgba(var(--contrast-1700), 0.38)\n );--mdc-theme-text-primary-on-background:var(\n --lime-text-primary-on-background-color,\n rgba(var(--contrast-1700), 0.87)\n );--mdc-theme-text-secondary-on-background:var(\n --lime-text-secondary-on-background-color,\n rgba(var(--contrast-1700), 0.54)\n );--mdc-theme-error:var(\n --lime-error-background-color,\n rgb(var(--color-red-dark))\n );--lime-error-text-color:rgb(var(--color-red-darker));--mdc-theme-surface:var(\n --lime-surface-background-color,\n rgb(var(--contrast-100))\n );--mdc-theme-on-surface:var(\n --lime-on-surface-color,\n rgb(var(--contrast-1500))\n )}.lime-looks-like-input-value{line-height:1.75rem;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;color:rgba(var(--contrast-1400), 1);font-size:0.875rem;font-weight:400;letter-spacing:0.009375em}.mdc-text-field--disabled .lime-looks-like-input-value{cursor:not-allowed;opacity:0.4}.lime-looks-like-input-value{padding:var(--limel-text-editor-padding)}*{box-sizing:border-box}:host(limel-text-editor){--limel-text-editor-outline-color:rgba(var(--contrast-700), 0.65);--limel-text-editor-background-color:rgba(var(--contrast-200), 0.5);--limel-text-editor-label-color:rgba(var(--contrast-1200), 1);--limel-text-editor-padding:0.75rem 1rem;position:relative;isolation:isolate;display:flex;flex-direction:column;width:100%;min-width:5rem;min-height:5rem;height:100%;max-height:100%}:host(limel-text-editor:hover){--limel-text-editor-outline-color:rgba(var(--contrast-700), 1)}:host(limel-text-editor:focus-within){--limel-text-editor-outline-color:var(--mdc-theme-primary)}:host(limel-text-editor[disabled]:not([disabled=false])){cursor:not-allowed;opacity:0.4}:host(limel-text-editor[disabled]:not([disabled=false])) limel-prosemirror-adapter{pointer-events:none}:host(limel-text-editor[invalid]:not([invalid=false])){--limel-text-editor-outline-color:var(--lime-error-text-color)}:host(limel-text-editor[readonly]:not([readonly=false])){--limel-text-editor-placeholder-top:0;--limel-text-editor-outline-color:transparent;--limel-text-editor-background-color:transparent}:host(limel-text-editor[readonly]:not([readonly=false])) limel-markdown{display:block;padding:var(--limel-text-editor-padding)}.notched-outline{transition:bottom var(--limel-h-l-grid-template-rows-transition-speed, 0.46s) cubic-bezier(1, 0.09, 0, 0.89);pointer-events:none;position:absolute;inset:0;bottom:var(--limel-text-editor-notched-outline-bottom, 0);display:flex;background-color:var(--limel-text-editor-background-color)}.leading-outline,.notch,.trailing-outline{transition:border-color 0.2s ease;border-width:1px;border-style:solid;border-color:var(--limel-text-editor-outline-color)}.leading-outline{flex-shrink:0;width:0.75rem;border-right-width:0;border-top-left-radius:0.25rem;border-bottom-left-radius:0.25rem}.notch{flex-shrink:0;position:relative;z-index:2;border-top-width:0;border-right-width:0;border-left-width:0;max-width:calc(100% - 1.5rem)}.trailing-outline{flex-grow:1;border-left-width:0;border-top-right-radius:0.25rem;border-bottom-right-radius:0.25rem}label{transform:translateY(-50%);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block;padding:0 0.25rem;color:var(--limel-text-editor-label-color);font-size:0.65rem;letter-spacing:var(--mdc-typography-subtitle1-letter-spacing, 0.009375em)}:host(limel-text-editor[required]) label::after{content:\"*\"}.placeholder{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:none;position:absolute;top:var(--limel-text-editor-placeholder-top, 2.25rem);left:0;right:0;padding:var(--limel-text-editor-padding);font-style:italic;font-size:0.875rem;color:rgb(var(--contrast-900))}limel-prosemirror-adapter{flex-grow:1;min-width:0;min-height:0;height:100%;overflow:hidden auto}:host(limel-text-editor:focus),:host(limel-text-editor:focus-visible),:host(limel-text-editor:focus-within),:host(limel-text-editor[invalid]:not([invalid=false])),:host(limel-text-editor[invalid=true]){--limel-h-l-grid-template-rows-transition-speed:0.46s;--limel-h-l-grid-template-rows:1fr}:host(limel-text-editor){--limel-h-l-grid-template-rows-transition-speed:0.3s;--limel-h-l-grid-template-rows:0fr}:host(limel-text-editor:focus) limel-helper-line,:host(limel-text-editor:focus-visible) limel-helper-line,:host(limel-text-editor:focus-within) limel-helper-line,:host(limel-text-editor:hover) limel-helper-line{will-change:grid-template-rows}:host(limel-text-editor.has-helper-text:focus-within) .notched-outline,:host(limel-text-editor.has-helper-text[invalid]:not([invalid=false])) .notched-outline{--limel-text-editor-notched-outline-bottom:1rem}:host(limel-text-editor[allow-resize]) limel-prosemirror-adapter{resize:vertical}";
8
+ const textEditorCss = "@charset \"UTF-8\";:host{--mdc-theme-primary:var(\n --lime-primary-color,\n rgb(var(--color-teal-default))\n );--mdc-theme-secondary:var(\n --lime-secondary-color,\n rgb(var(--contrast-1100))\n );--mdc-theme-on-primary:var(\n --lime-on-primary-color,\n rgb(var(--contrast-100))\n );--mdc-theme-on-secondary:var(\n --lime-on-secondary-color,\n rgb(var(--contrast-100))\n );--mdc-theme-text-disabled-on-background:var(\n --lime-text-disabled-on-background-color,\n rgba(var(--contrast-1700), 0.38)\n );--mdc-theme-text-primary-on-background:var(\n --lime-text-primary-on-background-color,\n rgba(var(--contrast-1700), 0.87)\n );--mdc-theme-text-secondary-on-background:var(\n --lime-text-secondary-on-background-color,\n rgba(var(--contrast-1700), 0.54)\n );--mdc-theme-error:var(\n --lime-error-background-color,\n rgb(var(--color-red-dark))\n );--lime-error-text-color:rgb(var(--color-red-darker));--mdc-theme-surface:var(\n --lime-surface-background-color,\n rgb(var(--contrast-100))\n );--mdc-theme-on-surface:var(\n --lime-on-surface-color,\n rgb(var(--contrast-1500))\n )}.lime-looks-like-input-value{line-height:1.75rem;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;color:rgba(var(--contrast-1400), 1);font-size:0.875rem;font-weight:400;letter-spacing:0.009375em}.mdc-text-field--disabled .lime-looks-like-input-value{cursor:not-allowed;opacity:0.4}.lime-looks-like-input-value{padding:var(--limel-text-editor-padding)}*{box-sizing:border-box}:host(limel-text-editor){--limel-text-editor-outline-color:rgba(var(--contrast-700), 0.65);--limel-text-editor-background-color:rgba(var(--contrast-200), 0.5);--limel-text-editor-label-color:rgba(var(--contrast-1200), 1);--limel-text-editor-padding:0.75rem 1rem;position:relative;isolation:isolate;display:flex;flex-direction:column;width:100%;min-width:5rem;min-height:5rem;height:100%;max-height:var(--text-editor-max-height, calc(100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom)) - 4rem))}:host(limel-text-editor:hover){--limel-text-editor-outline-color:rgba(var(--contrast-700), 1)}:host(limel-text-editor:focus-within){--limel-text-editor-outline-color:var(--mdc-theme-primary)}:host(limel-text-editor[disabled]:not([disabled=false])){cursor:not-allowed;opacity:0.4}:host(limel-text-editor[disabled]:not([disabled=false])) limel-prosemirror-adapter{pointer-events:none}:host(limel-text-editor[invalid]:not([invalid=false])){--limel-text-editor-outline-color:var(--lime-error-text-color)}:host(limel-text-editor[readonly]:not([readonly=false])){--limel-text-editor-placeholder-top:0;--limel-text-editor-outline-color:transparent;--limel-text-editor-background-color:transparent}:host(limel-text-editor[readonly]:not([readonly=false])) limel-markdown{display:block;padding:var(--limel-text-editor-padding)}.notched-outline{transition:bottom var(--limel-h-l-grid-template-rows-transition-speed, 0.46s) cubic-bezier(1, 0.09, 0, 0.89);pointer-events:none;position:absolute;inset:0;bottom:var(--limel-text-editor-notched-outline-bottom, 0);display:flex;background-color:var(--limel-text-editor-background-color)}.leading-outline,.notch,.trailing-outline{transition:border-color 0.2s ease;border-width:1px;border-style:solid;border-color:var(--limel-text-editor-outline-color)}.leading-outline{flex-shrink:0;width:0.75rem;border-right-width:0;border-top-left-radius:0.25rem;border-bottom-left-radius:0.25rem}.notch{flex-shrink:0;position:relative;z-index:2;border-top-width:0;border-right-width:0;border-left-width:0;max-width:calc(100% - 1.5rem)}.trailing-outline{flex-grow:1;border-left-width:0;border-top-right-radius:0.25rem;border-bottom-right-radius:0.25rem}label{transform:translateY(-50%);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block;padding:0 0.25rem;color:var(--limel-text-editor-label-color);font-size:0.65rem;letter-spacing:var(--mdc-typography-subtitle1-letter-spacing, 0.009375em)}:host(limel-text-editor[required]) label::after{content:\"*\"}.placeholder{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:none;position:absolute;top:var(--limel-text-editor-placeholder-top, 2.25rem);left:0;right:0;padding:var(--limel-text-editor-padding);font-style:italic;font-size:0.875rem;color:rgb(var(--contrast-900))}limel-prosemirror-adapter{flex-grow:1;min-width:0;min-height:0;height:100%;overflow:hidden auto}:host(limel-text-editor:focus),:host(limel-text-editor:focus-visible),:host(limel-text-editor:focus-within),:host(limel-text-editor[invalid]:not([invalid=false])),:host(limel-text-editor[invalid=true]){--limel-h-l-grid-template-rows-transition-speed:0.46s;--limel-h-l-grid-template-rows:1fr}:host(limel-text-editor){--limel-h-l-grid-template-rows-transition-speed:0.3s;--limel-h-l-grid-template-rows:0fr}:host(limel-text-editor:focus) limel-helper-line,:host(limel-text-editor:focus-visible) limel-helper-line,:host(limel-text-editor:focus-within) limel-helper-line,:host(limel-text-editor:hover) limel-helper-line{will-change:grid-template-rows}:host(limel-text-editor.has-helper-text:focus-within) .notched-outline,:host(limel-text-editor.has-helper-text[invalid]:not([invalid=false])) .notched-outline{--limel-text-editor-notched-outline-bottom:1rem}:host(limel-text-editor[allow-resize]) limel-prosemirror-adapter{resize:vertical}";
9
9
 
10
10
  const TextEditor = class {
11
11
  constructor(hostRef) {
@@ -1 +1 @@
1
- {"file":"limel-text-editor.entry.cjs.js","mappings":"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","names":["h","createRandomString","Host"],"sources":["./src/components/text-editor/text-editor.scss?tag=limel-text-editor&encapsulation=shadow","./src/components/text-editor/text-editor.tsx"],"sourcesContent":["@use '../../style/internal/shared_input-select-picker';\n@use '../../style/mixins.scss';\n\n@include shared_input-select-picker.lime-looks-like-input-value;\n.lime-looks-like-input-value {\n padding: var(--limel-text-editor-padding);\n}\n\n* {\n box-sizing: border-box;\n}\n\n:host(limel-text-editor) {\n --limel-text-editor-outline-color: #{shared_input-select-picker.$lime-text-field-outline-color};\n --limel-text-editor-background-color: #{shared_input-select-picker.$background-color-normal};\n --limel-text-editor-label-color: #{shared_input-select-picker.$label-color};\n --limel-text-editor-padding: 0.75rem 1rem;\n position: relative;\n isolation: isolate;\n display: flex;\n flex-direction: column;\n\n width: 100%;\n min-width: 5rem;\n min-height: 5rem;\n height: 100%;\n max-height: 100%;\n}\n\n:host(limel-text-editor:hover) {\n --limel-text-editor-outline-color: #{shared_input-select-picker.$lime-text-field-outline-color--hovered};\n}\n\n:host(limel-text-editor:focus-within) {\n --limel-text-editor-outline-color: #{shared_input-select-picker.$lime-text-field-outline-color--focused};\n}\n\n:host(limel-text-editor[disabled]:not([disabled='false'])) {\n @include shared_input-select-picker.looks-disabled;\n\n limel-prosemirror-adapter {\n pointer-events: none;\n }\n}\n\n:host(limel-text-editor[invalid]:not([invalid='false'])) {\n --limel-text-editor-outline-color: var(--lime-error-text-color);\n}\n\n:host(limel-text-editor[readonly]:not([readonly='false'])) {\n --limel-text-editor-placeholder-top: 0;\n --limel-text-editor-outline-color: transparent;\n --limel-text-editor-background-color: transparent;\n\n limel-markdown {\n display: block;\n padding: var(--limel-text-editor-padding);\n }\n}\n\n.notched-outline {\n transition: bottom\n var(--limel-h-l-grid-template-rows-transition-speed, 0.46s)\n cubic-bezier(1, 0.09, 0, 0.89);\n pointer-events: none;\n position: absolute;\n inset: 0;\n bottom: var(--limel-text-editor-notched-outline-bottom, 0);\n\n display: flex;\n background-color: var(--limel-text-editor-background-color);\n}\n\n.leading-outline,\n.notch,\n.trailing-outline {\n transition: border-color 0.2s ease;\n border-width: 1px;\n border-style: solid;\n border-color: var(--limel-text-editor-outline-color);\n}\n\n.leading-outline {\n flex-shrink: 0;\n width: 0.75rem;\n border-right-width: 0;\n border-top-left-radius: 0.25rem;\n border-bottom-left-radius: 0.25rem;\n}\n\n.notch {\n flex-shrink: 0;\n\n position: relative;\n z-index: 2;\n\n border-top-width: 0;\n border-right-width: 0;\n border-left-width: 0;\n\n max-width: calc(100% - 1.5rem);\n}\n\n.trailing-outline {\n flex-grow: 1;\n border-left-width: 0;\n border-top-right-radius: 0.25rem;\n border-bottom-right-radius: 0.25rem;\n}\n\nlabel {\n transform: translateY(-50%);\n\n @include mixins.truncate-text;\n display: block;\n padding: 0 0.25rem;\n\n color: var(--limel-text-editor-label-color);\n font-size: 0.65rem; // `10.4px` similar to MDC's floating label\n letter-spacing: var(--mdc-typography-subtitle1-letter-spacing, 0.009375em);\n\n :host(limel-text-editor[required]) & {\n &::after {\n content: '*';\n }\n }\n}\n\n.placeholder {\n @include mixins.truncate-text;\n pointer-events: none;\n position: absolute;\n top: var(--limel-text-editor-placeholder-top, 2.25rem);\n left: 0;\n right: 0;\n\n padding: var(--limel-text-editor-padding);\n font-style: italic;\n font-size: 0.875rem;\n color: shared_input-select-picker.$input-placeholder-color;\n}\n\nlimel-prosemirror-adapter {\n flex-grow: 1;\n\n min-width: 0;\n min-height: 0;\n height: 100%;\n overflow: hidden auto;\n}\n\n@include mixins.hide-helper-line-when-not-needed(limel-text-editor);\n:host(limel-text-editor.has-helper-text:focus-within),\n:host(limel-text-editor.has-helper-text[invalid]:not([invalid='false'])) {\n .notched-outline {\n --limel-text-editor-notched-outline-bottom: 1rem;\n }\n}\n\n:host(limel-text-editor[allow-resize]) {\n limel-prosemirror-adapter {\n resize: vertical;\n }\n}\n","import { Component, Event, EventEmitter, Host, Prop, h } from '@stencil/core';\nimport { FormComponent } from '../form/form.types';\nimport { Languages } from '../date-picker/date.types';\nimport { createRandomString } from '../../util/random-string';\n/**\n * A rich text editor that offers a rich text editing experience with markdown support,\n * in the sense that you can easily type markdown syntax and see the rendered\n * result as rich text in real-time. For instance, you can type `# Hello, world!`\n * and see it directly turning to a heading 1 (an `<h1>` HTML element).\n *\n * Naturally, you can use standard keyboard hotkeys such as <kbd>Ctrl</kbd> + <kbd>B</kbd>\n * to toggle bold text, <kbd>Ctrl</kbd> + <kbd>I</kbd> to toggle italic text, and so on.\n *\n * @exampleComponent limel-example-text-editor-basic\n * @exampleComponent limel-example-text-editor-as-form-component\n * @exampleComponent limel-example-text-editor-with-markdown\n * @exampleComponent limel-example-text-editor-with-html\n * @exampleComponent limel-example-text-editor-allow-resize\n * @exampleComponent limel-example-text-editor-size\n * @exampleComponent limel-example-text-editor-composite\n * @beta\n */\n@Component({\n tag: 'limel-text-editor',\n shadow: true,\n styleUrl: 'text-editor.scss',\n})\nexport class TextEditor implements FormComponent<string> {\n /** The type of content that the editor should handle and emit, defaults to `markdown`\n *\n * Assumed to be set only once, so not reactive to changes\n */\n @Prop()\n public contentType: 'markdown' | 'html' = 'markdown';\n\n /**\n * Defines the language for translations.\n */\n @Prop({ reflect: true })\n public language: Languages = 'en';\n\n /**\n * Set to `true` to disable the field.\n * Use `disabled` to indicate that the field can normally be interacted\n * with, but is currently disabled. This tells the user that if certain\n * requirements are met, the field may become enabled again.\n */\n @Prop({ reflect: true })\n public disabled?: boolean = false;\n\n /**\n * Set to `true` to make the component read-only.\n * Use `readonly` when the field is only there to present the data it holds,\n * and will not become possible for the current user to edit.\n * :::note\n * Consider that it might be better to use `limel-markdown`\n * instead of `limel-text-editor` when the goal is visualizing data.\n * :::\n */\n @Prop({ reflect: true })\n public readonly?: boolean = false;\n\n /**\n * Optional helper text to display below the input field when it has focus\n */\n @Prop({ reflect: true })\n public helperText?: string;\n\n /**\n * The placeholder text shown inside the input field,\n * when the field is empty.\n */\n @Prop({ reflect: true })\n public placeholder?: string;\n\n /**\n * The label of the editor\n */\n @Prop({ reflect: true })\n public label?: string;\n\n /**\n * Set to `true` to indicate that the current value of the editor is\n * invalid.\n */\n @Prop({ reflect: true })\n public invalid?: boolean = false;\n\n /**\n * Description of the text inside the editor as markdown\n */\n @Prop({ reflect: true })\n public value: string;\n\n /**\n * Set to `true` to indicate that the field is required.\n *\n * :::important\n * An empty but required field is not automatically considered invalid.\n * You must make sure to check the validity of the field on your own,\n * and properly handle the `invalid` state.\n * :::\n */\n @Prop({ reflect: true })\n public required?: boolean = false;\n\n /**\n * Set to `true` to allow the user to vertically resize the editor.\n * Set to `false` to disable the resize functionality.\n */\n @Prop({ reflect: true })\n public allowResize: boolean = true;\n\n /**\n * Dispatched when a change is made to the editor\n */\n @Event()\n public change: EventEmitter<string>;\n\n private helperTextId: string;\n private editorId: string;\n\n public constructor() {\n this.helperTextId = createRandomString();\n this.editorId = createRandomString();\n }\n\n public render() {\n return (\n <Host\n class={{\n 'has-helper-text': !!this.helperText,\n }}\n >\n <span class=\"notched-outline\">\n <span class=\"leading-outline\" />\n {this.renderLabel()}\n <span class=\"trailing-outline\" />\n </span>\n {this.renderEditor()}\n </Host>\n );\n }\n\n private renderEditor() {\n if (this.readonly && !this.value) {\n return [\n <span class=\"lime-looks-like-input-value\">–</span>,\n this.renderHelperLine(),\n ];\n }\n\n if (this.readonly) {\n return [\n <limel-markdown\n value={this.value}\n aria-controls={this.helperTextId}\n id={this.editorId}\n />,\n this.renderPlaceholder(),\n this.renderHelperLine(),\n ];\n }\n\n return [\n <limel-prosemirror-adapter\n aria-placeholder={this.placeholder}\n contentType={this.contentType}\n onChange={this.handleChange}\n value={this.value}\n aria-controls={this.helperTextId}\n id={this.editorId}\n tabindex={this.disabled ? -1 : 0}\n aria-disabled={this.disabled}\n language={this.language}\n />,\n this.renderPlaceholder(),\n this.renderHelperLine(),\n ];\n }\n\n private renderLabel() {\n if (!this.label) {\n return;\n }\n\n return (\n <span class=\"notch\">\n <label htmlFor={this.editorId}>{this.label}</label>\n </span>\n );\n }\n\n private renderPlaceholder() {\n if (!this.placeholder || this.value) {\n return;\n }\n\n return (\n <span class=\"placeholder\" aria-hidden=\"true\">\n {this.placeholder}\n </span>\n );\n }\n\n private renderHelperLine = () => {\n if (!this.helperText) {\n return;\n }\n\n return (\n <limel-helper-line\n helperText={this.helperText}\n helperTextId={this.helperTextId}\n invalid={this.isInvalid()}\n />\n );\n };\n\n private isInvalid = () => {\n if (this.readonly) {\n // A readonly field can never be invalid.\n return false;\n }\n\n if (this.invalid) {\n return true;\n }\n };\n\n private handleChange = () => (event: CustomEvent<string>) => {\n event.stopPropagation();\n this.change.emit(event.detail);\n };\n}\n"],"version":3}
1
+ {"file":"limel-text-editor.entry.cjs.js","mappings":"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","names":["h","createRandomString","Host"],"sources":["./src/components/text-editor/text-editor.scss?tag=limel-text-editor&encapsulation=shadow","./src/components/text-editor/text-editor.tsx"],"sourcesContent":["@use '../../style/internal/shared_input-select-picker';\n@use '../../style/mixins.scss';\n\n/**\n * @prop --text-editor-max-height: the tallest height the text editor can become when auto-resizing itself. Defaults to `calc(100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom)) - 4rem)`.\n */\n\n@include shared_input-select-picker.lime-looks-like-input-value;\n.lime-looks-like-input-value {\n padding: var(--limel-text-editor-padding);\n}\n\n* {\n box-sizing: border-box;\n}\n\n:host(limel-text-editor) {\n --limel-text-editor-outline-color: #{shared_input-select-picker.$lime-text-field-outline-color};\n --limel-text-editor-background-color: #{shared_input-select-picker.$background-color-normal};\n --limel-text-editor-label-color: #{shared_input-select-picker.$label-color};\n --limel-text-editor-padding: 0.75rem 1rem;\n position: relative;\n isolation: isolate;\n display: flex;\n flex-direction: column;\n\n width: 100%;\n min-width: 5rem;\n min-height: 5rem;\n height: 100%;\n max-height: var(\n --text-editor-max-height,\n calc(\n 100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom)) -\n 4rem\n )\n );\n}\n\n:host(limel-text-editor:hover) {\n --limel-text-editor-outline-color: #{shared_input-select-picker.$lime-text-field-outline-color--hovered};\n}\n\n:host(limel-text-editor:focus-within) {\n --limel-text-editor-outline-color: #{shared_input-select-picker.$lime-text-field-outline-color--focused};\n}\n\n:host(limel-text-editor[disabled]:not([disabled='false'])) {\n @include shared_input-select-picker.looks-disabled;\n\n limel-prosemirror-adapter {\n pointer-events: none;\n }\n}\n\n:host(limel-text-editor[invalid]:not([invalid='false'])) {\n --limel-text-editor-outline-color: var(--lime-error-text-color);\n}\n\n:host(limel-text-editor[readonly]:not([readonly='false'])) {\n --limel-text-editor-placeholder-top: 0;\n --limel-text-editor-outline-color: transparent;\n --limel-text-editor-background-color: transparent;\n\n limel-markdown {\n display: block;\n padding: var(--limel-text-editor-padding);\n }\n}\n\n.notched-outline {\n transition: bottom\n var(--limel-h-l-grid-template-rows-transition-speed, 0.46s)\n cubic-bezier(1, 0.09, 0, 0.89);\n pointer-events: none;\n position: absolute;\n inset: 0;\n bottom: var(--limel-text-editor-notched-outline-bottom, 0);\n\n display: flex;\n background-color: var(--limel-text-editor-background-color);\n}\n\n.leading-outline,\n.notch,\n.trailing-outline {\n transition: border-color 0.2s ease;\n border-width: 1px;\n border-style: solid;\n border-color: var(--limel-text-editor-outline-color);\n}\n\n.leading-outline {\n flex-shrink: 0;\n width: 0.75rem;\n border-right-width: 0;\n border-top-left-radius: 0.25rem;\n border-bottom-left-radius: 0.25rem;\n}\n\n.notch {\n flex-shrink: 0;\n\n position: relative;\n z-index: 2;\n\n border-top-width: 0;\n border-right-width: 0;\n border-left-width: 0;\n\n max-width: calc(100% - 1.5rem);\n}\n\n.trailing-outline {\n flex-grow: 1;\n border-left-width: 0;\n border-top-right-radius: 0.25rem;\n border-bottom-right-radius: 0.25rem;\n}\n\nlabel {\n transform: translateY(-50%);\n\n @include mixins.truncate-text;\n display: block;\n padding: 0 0.25rem;\n\n color: var(--limel-text-editor-label-color);\n font-size: 0.65rem; // `10.4px` similar to MDC's floating label\n letter-spacing: var(--mdc-typography-subtitle1-letter-spacing, 0.009375em);\n\n :host(limel-text-editor[required]) & {\n &::after {\n content: '*';\n }\n }\n}\n\n.placeholder {\n @include mixins.truncate-text;\n pointer-events: none;\n position: absolute;\n top: var(--limel-text-editor-placeholder-top, 2.25rem);\n left: 0;\n right: 0;\n\n padding: var(--limel-text-editor-padding);\n font-style: italic;\n font-size: 0.875rem;\n color: shared_input-select-picker.$input-placeholder-color;\n}\n\nlimel-prosemirror-adapter {\n flex-grow: 1;\n\n min-width: 0;\n min-height: 0;\n height: 100%;\n overflow: hidden auto;\n}\n\n@include mixins.hide-helper-line-when-not-needed(limel-text-editor);\n:host(limel-text-editor.has-helper-text:focus-within),\n:host(limel-text-editor.has-helper-text[invalid]:not([invalid='false'])) {\n .notched-outline {\n --limel-text-editor-notched-outline-bottom: 1rem;\n }\n}\n\n:host(limel-text-editor[allow-resize]) {\n limel-prosemirror-adapter {\n resize: vertical;\n }\n}\n","import { Component, Event, EventEmitter, Host, Prop, h } from '@stencil/core';\nimport { FormComponent } from '../form/form.types';\nimport { Languages } from '../date-picker/date.types';\nimport { createRandomString } from '../../util/random-string';\n/**\n * A rich text editor that offers a rich text editing experience with markdown support,\n * in the sense that you can easily type markdown syntax and see the rendered\n * result as rich text in real-time. For instance, you can type `# Hello, world!`\n * and see it directly turning to a heading 1 (an `<h1>` HTML element).\n *\n * Naturally, you can use standard keyboard hotkeys such as <kbd>Ctrl</kbd> + <kbd>B</kbd>\n * to toggle bold text, <kbd>Ctrl</kbd> + <kbd>I</kbd> to toggle italic text, and so on.\n *\n * @exampleComponent limel-example-text-editor-basic\n * @exampleComponent limel-example-text-editor-as-form-component\n * @exampleComponent limel-example-text-editor-with-markdown\n * @exampleComponent limel-example-text-editor-with-html\n * @exampleComponent limel-example-text-editor-allow-resize\n * @exampleComponent limel-example-text-editor-size\n * @exampleComponent limel-example-text-editor-composite\n * @beta\n */\n@Component({\n tag: 'limel-text-editor',\n shadow: true,\n styleUrl: 'text-editor.scss',\n})\nexport class TextEditor implements FormComponent<string> {\n /** The type of content that the editor should handle and emit, defaults to `markdown`\n *\n * Assumed to be set only once, so not reactive to changes\n */\n @Prop()\n public contentType: 'markdown' | 'html' = 'markdown';\n\n /**\n * Defines the language for translations.\n */\n @Prop({ reflect: true })\n public language: Languages = 'en';\n\n /**\n * Set to `true` to disable the field.\n * Use `disabled` to indicate that the field can normally be interacted\n * with, but is currently disabled. This tells the user that if certain\n * requirements are met, the field may become enabled again.\n */\n @Prop({ reflect: true })\n public disabled?: boolean = false;\n\n /**\n * Set to `true` to make the component read-only.\n * Use `readonly` when the field is only there to present the data it holds,\n * and will not become possible for the current user to edit.\n * :::note\n * Consider that it might be better to use `limel-markdown`\n * instead of `limel-text-editor` when the goal is visualizing data.\n * :::\n */\n @Prop({ reflect: true })\n public readonly?: boolean = false;\n\n /**\n * Optional helper text to display below the input field when it has focus\n */\n @Prop({ reflect: true })\n public helperText?: string;\n\n /**\n * The placeholder text shown inside the input field,\n * when the field is empty.\n */\n @Prop({ reflect: true })\n public placeholder?: string;\n\n /**\n * The label of the editor\n */\n @Prop({ reflect: true })\n public label?: string;\n\n /**\n * Set to `true` to indicate that the current value of the editor is\n * invalid.\n */\n @Prop({ reflect: true })\n public invalid?: boolean = false;\n\n /**\n * Description of the text inside the editor as markdown\n */\n @Prop({ reflect: true })\n public value: string;\n\n /**\n * Set to `true` to indicate that the field is required.\n *\n * :::important\n * An empty but required field is not automatically considered invalid.\n * You must make sure to check the validity of the field on your own,\n * and properly handle the `invalid` state.\n * :::\n */\n @Prop({ reflect: true })\n public required?: boolean = false;\n\n /**\n * Set to `true` to allow the user to vertically resize the editor.\n * Set to `false` to disable the resize functionality.\n */\n @Prop({ reflect: true })\n public allowResize: boolean = true;\n\n /**\n * Dispatched when a change is made to the editor\n */\n @Event()\n public change: EventEmitter<string>;\n\n private helperTextId: string;\n private editorId: string;\n\n public constructor() {\n this.helperTextId = createRandomString();\n this.editorId = createRandomString();\n }\n\n public render() {\n return (\n <Host\n class={{\n 'has-helper-text': !!this.helperText,\n }}\n >\n <span class=\"notched-outline\">\n <span class=\"leading-outline\" />\n {this.renderLabel()}\n <span class=\"trailing-outline\" />\n </span>\n {this.renderEditor()}\n </Host>\n );\n }\n\n private renderEditor() {\n if (this.readonly && !this.value) {\n return [\n <span class=\"lime-looks-like-input-value\">–</span>,\n this.renderHelperLine(),\n ];\n }\n\n if (this.readonly) {\n return [\n <limel-markdown\n value={this.value}\n aria-controls={this.helperTextId}\n id={this.editorId}\n />,\n this.renderPlaceholder(),\n this.renderHelperLine(),\n ];\n }\n\n return [\n <limel-prosemirror-adapter\n aria-placeholder={this.placeholder}\n contentType={this.contentType}\n onChange={this.handleChange}\n value={this.value}\n aria-controls={this.helperTextId}\n id={this.editorId}\n tabindex={this.disabled ? -1 : 0}\n aria-disabled={this.disabled}\n language={this.language}\n />,\n this.renderPlaceholder(),\n this.renderHelperLine(),\n ];\n }\n\n private renderLabel() {\n if (!this.label) {\n return;\n }\n\n return (\n <span class=\"notch\">\n <label htmlFor={this.editorId}>{this.label}</label>\n </span>\n );\n }\n\n private renderPlaceholder() {\n if (!this.placeholder || this.value) {\n return;\n }\n\n return (\n <span class=\"placeholder\" aria-hidden=\"true\">\n {this.placeholder}\n </span>\n );\n }\n\n private renderHelperLine = () => {\n if (!this.helperText) {\n return;\n }\n\n return (\n <limel-helper-line\n helperText={this.helperText}\n helperTextId={this.helperTextId}\n invalid={this.isInvalid()}\n />\n );\n };\n\n private isInvalid = () => {\n if (this.readonly) {\n // A readonly field can never be invalid.\n return false;\n }\n\n if (this.invalid) {\n return true;\n }\n };\n\n private handleChange = () => (event: CustomEvent<string>) => {\n event.stopPropagation();\n this.change.emit(event.detail);\n };\n}\n"],"version":3}
@@ -34,18 +34,23 @@ const textEditorMenuItems = [
34
34
  selected: false,
35
35
  },
36
36
  {
37
- value: EditorMenuTypes.Code,
38
- text: 'Code',
39
- commandText: `${mod} \``,
40
- icon: '-lime-text-code',
37
+ value: EditorMenuTypes.Link,
38
+ text: 'Link',
39
+ icon: '-lime-text-link',
40
+ iconOnly: true,
41
+ },
42
+ { separator: true },
43
+ {
44
+ value: EditorMenuTypes.BulletList,
45
+ text: 'Bullet list',
46
+ icon: '-lime-text-bulleted-list',
41
47
  iconOnly: true,
42
48
  selected: false,
43
49
  },
44
50
  {
45
- value: EditorMenuTypes.CodeBlock,
46
- text: 'Code Block',
47
- commandText: `${mod} ${shift} C`,
48
- icon: '-lime-text-code-block',
51
+ value: EditorMenuTypes.OrderedList,
52
+ text: 'Numbered list',
53
+ icon: '-lime-text-ordered-list',
49
54
  iconOnly: true,
50
55
  selected: false,
51
56
  },
@@ -76,32 +81,29 @@ const textEditorMenuItems = [
76
81
  },
77
82
  { separator: true },
78
83
  {
79
- value: EditorMenuTypes.BulletList,
80
- text: 'Bullet list',
81
- icon: '-lime-text-bulleted-list',
84
+ value: EditorMenuTypes.Blockquote,
85
+ text: 'Blockquote',
86
+ icon: '-lime-text-blockquote',
82
87
  iconOnly: true,
83
88
  selected: false,
84
89
  },
90
+ { separator: true },
85
91
  {
86
- value: EditorMenuTypes.OrderedList,
87
- text: 'Numbered list',
88
- icon: '-lime-text-ordered-list',
92
+ value: EditorMenuTypes.Code,
93
+ text: 'Code',
94
+ commandText: `${mod} \``,
95
+ icon: '-lime-text-code',
89
96
  iconOnly: true,
90
97
  selected: false,
91
98
  },
92
99
  {
93
- value: EditorMenuTypes.Blockquote,
94
- text: 'Blockquote',
95
- icon: '-lime-text-blockquote',
100
+ value: EditorMenuTypes.CodeBlock,
101
+ text: 'Code Block',
102
+ commandText: `${mod} ${shift} C`,
103
+ icon: '-lime-text-code-block',
96
104
  iconOnly: true,
97
105
  selected: false,
98
106
  },
99
- {
100
- value: EditorMenuTypes.Link,
101
- text: 'Link',
102
- icon: '-lime-text-link',
103
- iconOnly: true,
104
- },
105
107
  ];
106
108
  export const getTextEditorMenuItems = () => cloneDeep(textEditorMenuItems);
107
109
  export const menuTranslationIDs = {
@@ -1 +1 @@
1
- {"version":3,"file":"menu-items.js","sourceRoot":"","sources":["../../../../../src/components/text-editor/prosemirror-adapter/menu/menu-items.ts"],"names":[],"mappings":"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","sourcesContent":["import { ActionBarItem } from 'src/components/action-bar/action-bar.types';\nimport { ListSeparator } from 'src/components/list/list-item.types';\nimport { EditorMenuTypes } from './types';\nimport { cloneDeep } from 'lodash-es';\n\nconst getCommandSymbols = (): {\n mod: string;\n option: string;\n shift: string;\n} => {\n const macUserAgent = /Macintosh|MacIntel|MacPPC|Mac68K/;\n if (navigator.userAgent.match(macUserAgent)) {\n return { mod: '⌘', option: '⌥', shift: '⇧' };\n }\n\n return { mod: 'Ctrl', option: 'Alt', shift: 'Shift' };\n};\n\nconst { mod, shift } = getCommandSymbols();\n\nconst textEditorMenuItems: Array<\n ActionBarItem<EditorMenuTypes> | ListSeparator\n> = [\n {\n value: EditorMenuTypes.Bold,\n text: 'Bold',\n commandText: `${mod} B`,\n icon: '-lime-text-bold',\n iconOnly: true,\n selected: false,\n },\n {\n value: EditorMenuTypes.Italic,\n text: 'Italic',\n commandText: `${mod} I`,\n icon: '-lime-text-italic',\n iconOnly: true,\n selected: false,\n },\n {\n value: EditorMenuTypes.Strikethrough,\n text: 'Strikethrough',\n commandText: `${mod} ${shift} X`,\n icon: '-lime-text-strikethrough',\n iconOnly: true,\n selected: false,\n },\n {\n value: EditorMenuTypes.Code,\n text: 'Code',\n commandText: `${mod} \\``,\n icon: '-lime-text-code',\n iconOnly: true,\n selected: false,\n },\n {\n value: EditorMenuTypes.CodeBlock,\n text: 'Code Block',\n commandText: `${mod} ${shift} C`,\n icon: '-lime-text-code-block',\n iconOnly: true,\n selected: false,\n },\n { separator: true },\n {\n value: EditorMenuTypes.HeaderLevel1,\n text: 'Header 1',\n commandText: `${mod} ${shift} 1`,\n icon: '-lime-text-h-heading-1',\n iconOnly: true,\n selected: false,\n },\n {\n value: EditorMenuTypes.HeaderLevel2,\n text: 'Header 2',\n commandText: `${mod} ${shift} 2`,\n icon: '-lime-text-h-heading-2',\n iconOnly: true,\n selected: false,\n },\n {\n value: EditorMenuTypes.HeaderLevel3,\n text: 'Header 3',\n commandText: `${mod} ${shift} 3`,\n icon: '-lime-text-h-heading-3',\n iconOnly: true,\n selected: false,\n },\n { separator: true },\n {\n value: EditorMenuTypes.BulletList,\n text: 'Bullet list',\n icon: '-lime-text-bulleted-list',\n iconOnly: true,\n selected: false,\n },\n {\n value: EditorMenuTypes.OrderedList,\n text: 'Numbered list',\n icon: '-lime-text-ordered-list',\n iconOnly: true,\n selected: false,\n },\n {\n value: EditorMenuTypes.Blockquote,\n text: 'Blockquote',\n icon: '-lime-text-blockquote',\n iconOnly: true,\n selected: false,\n },\n {\n value: EditorMenuTypes.Link,\n text: 'Link',\n icon: '-lime-text-link',\n iconOnly: true,\n },\n];\n\nexport const getTextEditorMenuItems = () => cloneDeep(textEditorMenuItems);\n\nexport const menuTranslationIDs = {\n strong: 'editor-menu.bold',\n em: 'editor-menu.italic',\n headerlevel1: 'editor-menu.h1',\n headerlevel2: 'editor-menu.h2',\n headerlevel3: 'editor-menu.h3',\n /* eslint-disable camelcase */\n bullet_list: 'editor-menu.bulleted-list',\n ordered_list: 'editor-menu.numbered-list',\n code_block: 'editor-menu.code-block',\n /* eslint-enable camelcase */\n blockquote: 'editor-menu.blockquote',\n link: 'editor-menu.link',\n strikethrough: 'editor-menu.strikethrough',\n code: 'editor-menu.code',\n};\n\nexport type menuTranslationIDs =\n (typeof menuTranslationIDs)[keyof typeof menuTranslationIDs];\n"]}
1
+ {"version":3,"file":"menu-items.js","sourceRoot":"","sources":["../../../../../src/components/text-editor/prosemirror-adapter/menu/menu-items.ts"],"names":[],"mappings":"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","sourcesContent":["import { ActionBarItem } from 'src/components/action-bar/action-bar.types';\nimport { ListSeparator } from 'src/components/list/list-item.types';\nimport { EditorMenuTypes } from './types';\nimport { cloneDeep } from 'lodash-es';\n\nconst getCommandSymbols = (): {\n mod: string;\n option: string;\n shift: string;\n} => {\n const macUserAgent = /Macintosh|MacIntel|MacPPC|Mac68K/;\n if (navigator.userAgent.match(macUserAgent)) {\n return { mod: '⌘', option: '⌥', shift: '⇧' };\n }\n\n return { mod: 'Ctrl', option: 'Alt', shift: 'Shift' };\n};\n\nconst { mod, shift } = getCommandSymbols();\n\nconst textEditorMenuItems: Array<\n ActionBarItem<EditorMenuTypes> | ListSeparator\n> = [\n {\n value: EditorMenuTypes.Bold,\n text: 'Bold',\n commandText: `${mod} B`,\n icon: '-lime-text-bold',\n iconOnly: true,\n selected: false,\n },\n {\n value: EditorMenuTypes.Italic,\n text: 'Italic',\n commandText: `${mod} I`,\n icon: '-lime-text-italic',\n iconOnly: true,\n selected: false,\n },\n {\n value: EditorMenuTypes.Strikethrough,\n text: 'Strikethrough',\n commandText: `${mod} ${shift} X`,\n icon: '-lime-text-strikethrough',\n iconOnly: true,\n selected: false,\n },\n {\n value: EditorMenuTypes.Link,\n text: 'Link',\n icon: '-lime-text-link',\n iconOnly: true,\n },\n { separator: true },\n {\n value: EditorMenuTypes.BulletList,\n text: 'Bullet list',\n icon: '-lime-text-bulleted-list',\n iconOnly: true,\n selected: false,\n },\n {\n value: EditorMenuTypes.OrderedList,\n text: 'Numbered list',\n icon: '-lime-text-ordered-list',\n iconOnly: true,\n selected: false,\n },\n { separator: true },\n {\n value: EditorMenuTypes.HeaderLevel1,\n text: 'Header 1',\n commandText: `${mod} ${shift} 1`,\n icon: '-lime-text-h-heading-1',\n iconOnly: true,\n selected: false,\n },\n {\n value: EditorMenuTypes.HeaderLevel2,\n text: 'Header 2',\n commandText: `${mod} ${shift} 2`,\n icon: '-lime-text-h-heading-2',\n iconOnly: true,\n selected: false,\n },\n {\n value: EditorMenuTypes.HeaderLevel3,\n text: 'Header 3',\n commandText: `${mod} ${shift} 3`,\n icon: '-lime-text-h-heading-3',\n iconOnly: true,\n selected: false,\n },\n { separator: true },\n {\n value: EditorMenuTypes.Blockquote,\n text: 'Blockquote',\n icon: '-lime-text-blockquote',\n iconOnly: true,\n selected: false,\n },\n { separator: true },\n {\n value: EditorMenuTypes.Code,\n text: 'Code',\n commandText: `${mod} \\``,\n icon: '-lime-text-code',\n iconOnly: true,\n selected: false,\n },\n {\n value: EditorMenuTypes.CodeBlock,\n text: 'Code Block',\n commandText: `${mod} ${shift} C`,\n icon: '-lime-text-code-block',\n iconOnly: true,\n selected: false,\n },\n];\n\nexport const getTextEditorMenuItems = () => cloneDeep(textEditorMenuItems);\n\nexport const menuTranslationIDs = {\n strong: 'editor-menu.bold',\n em: 'editor-menu.italic',\n headerlevel1: 'editor-menu.h1',\n headerlevel2: 'editor-menu.h2',\n headerlevel3: 'editor-menu.h3',\n /* eslint-disable camelcase */\n bullet_list: 'editor-menu.bulleted-list',\n ordered_list: 'editor-menu.numbered-list',\n code_block: 'editor-menu.code-block',\n /* eslint-enable camelcase */\n blockquote: 'editor-menu.blockquote',\n link: 'editor-menu.link',\n strikethrough: 'editor-menu.strikethrough',\n code: 'editor-menu.code',\n};\n\nexport type menuTranslationIDs =\n (typeof menuTranslationIDs)[keyof typeof menuTranslationIDs];\n"]}
@@ -118,6 +118,9 @@
118
118
  * 2. the CSS variables of `--kompendium-example-font-family`
119
119
  * in the `<style>` tag of `index.html`.
120
120
  */
121
+ /**
122
+ * @prop --text-editor-max-height: the tallest height the text editor can become when auto-resizing itself. Defaults to `calc(100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom)) - 4rem)`.
123
+ */
121
124
  .lime-looks-like-input-value {
122
125
  line-height: 1.75rem;
123
126
  -moz-osx-font-smoothing: grayscale;
@@ -153,7 +156,7 @@
153
156
  min-width: 5rem;
154
157
  min-height: 5rem;
155
158
  height: 100%;
156
- max-height: 100%;
159
+ max-height: var(--text-editor-max-height, calc(100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom)) - 4rem));
157
160
  }
158
161
 
159
162
  :host(limel-text-editor:hover) {
@@ -16855,18 +16855,23 @@ const textEditorMenuItems = [
16855
16855
  selected: false,
16856
16856
  },
16857
16857
  {
16858
- value: EditorMenuTypes.Code,
16859
- text: 'Code',
16860
- commandText: `${mod} \``,
16861
- icon: '-lime-text-code',
16858
+ value: EditorMenuTypes.Link,
16859
+ text: 'Link',
16860
+ icon: '-lime-text-link',
16861
+ iconOnly: true,
16862
+ },
16863
+ { separator: true },
16864
+ {
16865
+ value: EditorMenuTypes.BulletList,
16866
+ text: 'Bullet list',
16867
+ icon: '-lime-text-bulleted-list',
16862
16868
  iconOnly: true,
16863
16869
  selected: false,
16864
16870
  },
16865
16871
  {
16866
- value: EditorMenuTypes.CodeBlock,
16867
- text: 'Code Block',
16868
- commandText: `${mod} ${shift} C`,
16869
- icon: '-lime-text-code-block',
16872
+ value: EditorMenuTypes.OrderedList,
16873
+ text: 'Numbered list',
16874
+ icon: '-lime-text-ordered-list',
16870
16875
  iconOnly: true,
16871
16876
  selected: false,
16872
16877
  },
@@ -16897,32 +16902,29 @@ const textEditorMenuItems = [
16897
16902
  },
16898
16903
  { separator: true },
16899
16904
  {
16900
- value: EditorMenuTypes.BulletList,
16901
- text: 'Bullet list',
16902
- icon: '-lime-text-bulleted-list',
16905
+ value: EditorMenuTypes.Blockquote,
16906
+ text: 'Blockquote',
16907
+ icon: '-lime-text-blockquote',
16903
16908
  iconOnly: true,
16904
16909
  selected: false,
16905
16910
  },
16911
+ { separator: true },
16906
16912
  {
16907
- value: EditorMenuTypes.OrderedList,
16908
- text: 'Numbered list',
16909
- icon: '-lime-text-ordered-list',
16913
+ value: EditorMenuTypes.Code,
16914
+ text: 'Code',
16915
+ commandText: `${mod} \``,
16916
+ icon: '-lime-text-code',
16910
16917
  iconOnly: true,
16911
16918
  selected: false,
16912
16919
  },
16913
16920
  {
16914
- value: EditorMenuTypes.Blockquote,
16915
- text: 'Blockquote',
16916
- icon: '-lime-text-blockquote',
16921
+ value: EditorMenuTypes.CodeBlock,
16922
+ text: 'Code Block',
16923
+ commandText: `${mod} ${shift} C`,
16924
+ icon: '-lime-text-code-block',
16917
16925
  iconOnly: true,
16918
16926
  selected: false,
16919
16927
  },
16920
- {
16921
- value: EditorMenuTypes.Link,
16922
- text: 'Link',
16923
- icon: '-lime-text-link',
16924
- iconOnly: true,
16925
- },
16926
16928
  ];
16927
16929
  const getTextEditorMenuItems = () => cloneDeep(textEditorMenuItems);
16928
16930
  const menuTranslationIDs = {