@mantine/tiptap 9.0.1 → 9.0.2
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RichTextEditor.module.cjs","names":[],"sources":["../src/RichTextEditor.module.css"],"sourcesContent":[".root {\n position: relative;\n border: 1px solid;\n border-radius: var(--mantine-radius-default);\n\n @mixin where-light {\n border-color: var(--mantine-color-gray-4);\n }\n\n @mixin where-dark {\n border-color: var(--mantine-color-dark-4);\n }\n}\n\n.Typography {\n padding: 0;\n margin: 0;\n\n & li > p {\n margin: 0;\n }\n\n & ul li,\n & ol li {\n margin-top: 2px;\n }\n\n & p {\n margin-bottom: 7px;\n }\n\n & h1,\n & h2,\n & h3,\n & h4,\n & h5,\n & h6,\n & p {\n margin-top: 0;\n }\n}\n\n.content {\n background-color: var(--mantine-color-body);\n border-radius: var(--mantine-radius-default);\n\n & :global(.ProseMirror) {\n outline: 0;\n padding: var(--mantine-spacing-md);\n }\n\n & :global(.ProseMirror > *:last-child) {\n margin-bottom: 0;\n }\n\n & :global(.ProseMirror p.is-editor-empty:first-of-type::before) {\n content: attr(data-placeholder);\n pointer-events: none;\n user-select: none;\n float: left;\n height: 0;\n color: var(--mantine-color-placeholder);\n }\n\n & :global(div:not(.ProseMirror)) {\n /* Position the bubble menu above the toolbar. As it doesn't have its own selector,\n assert that the non-ProseMirror div is the bubble or floating menu */\n z-index: 2;\n }\n\n & :global(pre) {\n font-family: var(--mantine-font-family-monospace);\n border-radius: var(--mantine-radius-default);\n padding: var(--mantine-spacing-sm) var(--mantine-spacing-md);\n\n @mixin where-light {\n background-color: var(--mantine-color-gray-0);\n color: var(--mantine-color-gray-9);\n --code-color-comment: var(--mantine-color-gray-5);\n --code-color-var: var(--mantine-color-red-7);\n --code-color-number: var(--mantine-color-blue-7);\n --code-color-title: var(--mantine-color-pink-7);\n --code-color-keyword: var(--mantine-color-violet-7);\n }\n\n @mixin where-dark {\n background-color: var(--mantine-color-dark-8);\n color: var(--mantine-color-dark-1);\n --code-color-comment: var(--mantine-color-dark-2);\n --code-color-var: var(--mantine-color-red-5);\n --code-color-number: var(--mantine-color-cyan-5);\n --code-color-title: var(--mantine-color-yellow-5);\n --code-color-keyword: var(--mantine-color-violet-3);\n }\n\n & code {\n background: none !important;\n color: inherit;\n font-size: var(--mantine-font-size-sm);\n padding: 0;\n }\n\n & :global(.hljs-comment),\n & :global(.hljs-quote) {\n color: var(--code-color-comment);\n }\n\n & :global(.hljs-variable),\n & :global(.hljs-template-variable),\n & :global(.hljs-attribute),\n & :global(.hljs-tag),\n & :global(.hljs-regexp),\n & :global(.hljs-link),\n & :global(.hljs-name),\n & :global(.hljs-selector-id),\n & :global(.hljs-selector-class) {\n color: var(--code-color-var);\n }\n\n & :global(.hljs-number),\n & :global(.hljs-meta),\n & :global(.hljs-built_in),\n & :global(.hljs-builtin-name),\n & :global(.hljs-literal),\n & :global(.hljs-type),\n & :global(.hljs-params) {\n color: var(--code-color-number);\n }\n\n & :global(.hljs-string),\n & :global(.hljs-symbol),\n & :global(.hljs-bullet) {\n color: var(--code-color-var);\n }\n\n & :global(.hljs-title),\n & :global(.hljs-section) {\n color: var(--code-color-title);\n }\n\n & :global(.hljs-keyword),\n & :global(.hljs-selector-tag) {\n color: var(--code-color-keyword);\n }\n\n & :global(.hljs-emphasis) {\n font-style: italic;\n }\n\n & :global(.hljs-strong) {\n font-weight: 700;\n }\n }\n}\n\n.linkEditorDropdown {\n background-color: var(--mantine-color-body);\n}\n\n.control {\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: var(--mantine-radius-default);\n cursor: default;\n\n &:where([data-variant='default']) {\n border: 1px solid;\n min-width: 26px;\n height: 26px;\n }\n\n &:where([data-variant='subtle']) {\n --control-icon-size: 20px;\n min-width: 32px;\n height: 32px;\n }\n\n @mixin where-light {\n background-color: var(--mantine-color-white);\n border-color: var(--mantine-color-gray-4);\n color: var(--mantine-color-gray-7);\n }\n\n @mixin where-dark {\n border-color: var(--mantine-color-dark-4);\n color: var(--mantine-color-dark-1);\n\n &:where([data-variant='default']) {\n background-color: var(--mantine-color-dark-6);\n }\n\n &:where([data-variant='subtle']) {\n background-color: var(--mantine-color-dark-7);\n }\n }\n\n &:where([data-disabled]) {\n cursor: not-allowed;\n color: var(--mantine-color-disabled-color);\n background-color: var(--mantine-color-disabled);\n }\n\n &:where([data-interactive]:not([data-disabled])) {\n cursor: pointer;\n\n @mixin hover {\n color: var(--mantine-color-bright);\n\n @mixin where-light {\n &:where([data-variant='default']) {\n background-color: var(--mantine-color-gray-0);\n }\n\n &:where([data-variant='subtle']) {\n background-color: var(--mantine-color-gray-1);\n }\n }\n\n @mixin where-dark {\n background-color: var(--mantine-color-dark-5);\n }\n }\n }\n\n &:where([data-active]) {\n background-color: var(--mantine-primary-color-light);\n color: var(--mantine-primary-color-light-color);\n\n @mixin hover {\n background-color: var(--mantine-primary-color-light-hover);\n }\n }\n}\n\n.controlIcon {\n width: var(--control-icon-size, 16px);\n height: var(--control-icon-size, 16px);\n}\n\n.controlsGroup {\n display: flex;\n background-color: var(--mantine-color-body);\n\n &:where([data-variant='default']) {\n & :where([data-rich-text-editor-control]) {\n border-radius: 0;\n\n &:where(:not(:last-of-type)) {\n border-inline-end-width: 0;\n }\n\n &:where(:last-of-type) {\n border-start-end-radius: var(--mantine-radius-default);\n border-end-end-radius: var(--mantine-radius-default);\n }\n\n &:where(:first-of-type) {\n border-start-start-radius: var(--mantine-radius-default);\n border-end-start-radius: var(--mantine-radius-default);\n }\n }\n }\n}\n\n.linkEditor {\n display: flex;\n}\n\n.linkEditorInput {\n border-start-end-radius: 0;\n border-end-end-radius: 0;\n border-inline-end: 0;\n}\n\n.linkEditorExternalControl {\n border: 1px solid;\n color: var(--mantine-color-text);\n height: 24px;\n width: 24px;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: var(--mantine-radius-default);\n\n @mixin where-light {\n background-color: var(--mantine-color-white);\n border-color: var(--mantine-color-gray-4);\n }\n\n @mixin where-dark {\n background-color: var(--mantine-color-dark-7);\n border-color: var(--mantine-color-dark-4);\n }\n\n &:where([data-active]) {\n background-color: var(--mantine-primary-color-light);\n color: var(--mantine-primary-color-filled);\n\n @mixin hover {\n background-color: var(--mantine-primary-color-light-hover);\n }\n }\n}\n\n.linkEditorSave {\n border-start-start-radius: 0;\n border-end-start-radius: 0;\n}\n\n.toolbar {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: var(--mantine-spacing-sm);\n top: var(--rte-sticky-offset, 0px);\n background-color: var(--mantine-color-body);\n z-index: 1;\n border-start-end-radius: var(--mantine-radius-default);\n border-start-start-radius: var(--mantine-radius-default);\n border-bottom: 1px solid;\n\n &:where([data-variant='default']) {\n padding: var(--mantine-spacing-xs) var(--mantine-spacing-md);\n }\n\n &:where([data-variant='subtle']) {\n padding: 4px;\n row-gap: 0;\n }\n\n @mixin where-light {\n border-color: var(--mantine-color-gray-4);\n }\n\n @mixin where-dark {\n border-color: var(--mantine-color-dark-4);\n }\n\n &:where([data-sticky]) {\n position: sticky;\n }\n}\n\n.taskList {\n list-style-type: none;\n padding: 0;\n padding-inline-start: 0;\n\n & :where(li) {\n margin: 0;\n padding: 0;\n display: flex;\n }\n\n & :where(ul) {\n margin-top: 5px;\n }\n\n & p {\n margin: 0;\n padding: 0;\n }\n\n & :where(label) {\n display: inline-block;\n }\n\n & :where(input) {\n cursor: pointer;\n appearance: none;\n width: 18px;\n height: 18px;\n border: 1px solid;\n border-radius: var(--mantine-radius-default);\n vertical-align: middle;\n position: relative;\n\n @mixin where-light {\n background-color: var(--mantine-color-white);\n border-color: var(--mantine-color-gray-4);\n }\n\n @mixin where-dark {\n background-color: var(--mantine-color-dark-6);\n border-color: var(--mantine-color-dark-4);\n }\n\n &:checked {\n background-color: var(--mantine-primary-color-filled);\n border-color: var(--mantine-primary-color-filled);\n\n &::before {\n position: absolute;\n content: '';\n inset: 0;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAxMCA3Ij48cGF0aCBmaWxsPSIjZmZmIiBkPSJNNCA0LjU4NkwxLjcwNyAyLjI5M0ExIDEgMCAxMC4yOTMgMy43MDdsMyAzYS45OTcuOTk3IDAgMDAxLjQxNCAwbDUtNUExIDEgMCAxMDguMjkzLjI5M0w0IDQuNTg2eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 10px;\n background-position: center;\n }\n }\n }\n\n & :where(li > label) {\n margin-inline-end: var(--mantine-spacing-sm);\n }\n}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"RichTextEditor.module.cjs","names":[],"sources":["../src/RichTextEditor.module.css"],"sourcesContent":[".root {\n position: relative;\n border: 1px solid;\n border-radius: var(--mantine-radius-default);\n\n @mixin where-light {\n border-color: var(--mantine-color-gray-4);\n }\n\n @mixin where-dark {\n border-color: var(--mantine-color-dark-4);\n }\n}\n\n.Typography {\n padding: 0;\n margin: 0;\n\n & li > p {\n margin: 0;\n }\n\n & ul li,\n & ol li {\n margin-top: 2px;\n }\n\n & p {\n margin-bottom: 7px;\n }\n\n & h1,\n & h2,\n & h3,\n & h4,\n & h5,\n & h6,\n & p {\n margin-top: 0;\n }\n}\n\n.content {\n background-color: var(--mantine-color-body);\n border-radius: var(--mantine-radius-default);\n\n & :global(.ProseMirror) {\n outline: 0;\n padding: var(--mantine-spacing-md);\n }\n\n & :global(.ProseMirror > *:last-child) {\n margin-bottom: 0;\n }\n\n & :global(.ProseMirror p.is-editor-empty:first-of-type::before) {\n content: attr(data-placeholder);\n pointer-events: none;\n user-select: none;\n float: left;\n height: 0;\n color: var(--mantine-color-placeholder);\n }\n\n & :global(div:not(.ProseMirror)) {\n /* Position the bubble menu above the toolbar. As it doesn't have its own selector,\n assert that the non-ProseMirror div is the bubble or floating menu */\n z-index: 2;\n }\n\n & :global(pre) {\n font-family: var(--mantine-font-family-monospace);\n border-radius: var(--mantine-radius-default);\n padding: var(--mantine-spacing-sm) var(--mantine-spacing-md);\n\n @mixin where-light {\n background-color: var(--mantine-color-gray-0);\n color: var(--mantine-color-gray-9);\n --code-color-comment: var(--mantine-color-gray-5);\n --code-color-var: var(--mantine-color-red-7);\n --code-color-number: var(--mantine-color-blue-7);\n --code-color-title: var(--mantine-color-pink-7);\n --code-color-keyword: var(--mantine-color-violet-7);\n }\n\n @mixin where-dark {\n background-color: var(--mantine-color-dark-8);\n color: var(--mantine-color-dark-1);\n --code-color-comment: var(--mantine-color-dark-2);\n --code-color-var: var(--mantine-color-red-5);\n --code-color-number: var(--mantine-color-cyan-5);\n --code-color-title: var(--mantine-color-yellow-5);\n --code-color-keyword: var(--mantine-color-violet-3);\n }\n\n & code {\n background: none !important;\n color: inherit;\n font-size: var(--mantine-font-size-sm);\n padding: 0;\n }\n\n & :global(.hljs-comment),\n & :global(.hljs-quote) {\n color: var(--code-color-comment);\n }\n\n & :global(.hljs-variable),\n & :global(.hljs-template-variable),\n & :global(.hljs-attribute),\n & :global(.hljs-tag),\n & :global(.hljs-regexp),\n & :global(.hljs-link),\n & :global(.hljs-name),\n & :global(.hljs-selector-id),\n & :global(.hljs-selector-class) {\n color: var(--code-color-var);\n }\n\n & :global(.hljs-number),\n & :global(.hljs-meta),\n & :global(.hljs-built_in),\n & :global(.hljs-builtin-name),\n & :global(.hljs-literal),\n & :global(.hljs-type),\n & :global(.hljs-params) {\n color: var(--code-color-number);\n }\n\n & :global(.hljs-string),\n & :global(.hljs-symbol),\n & :global(.hljs-bullet) {\n color: var(--code-color-var);\n }\n\n & :global(.hljs-title),\n & :global(.hljs-section) {\n color: var(--code-color-title);\n }\n\n & :global(.hljs-keyword),\n & :global(.hljs-selector-tag) {\n color: var(--code-color-keyword);\n }\n\n & :global(.hljs-emphasis) {\n font-style: italic;\n }\n\n & :global(.hljs-strong) {\n font-weight: 700;\n }\n }\n}\n\n.linkEditorDropdown {\n background-color: var(--mantine-color-body);\n}\n\n.control {\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: var(--mantine-radius-default);\n cursor: default;\n\n &:where([data-variant='default']) {\n border: 1px solid;\n min-width: 26px;\n height: 26px;\n }\n\n &:where([data-variant='subtle']) {\n --control-icon-size: 20px;\n min-width: 32px;\n height: 32px;\n }\n\n @mixin where-light {\n background-color: var(--mantine-color-white);\n border-color: var(--mantine-color-gray-4);\n color: var(--mantine-color-gray-7);\n }\n\n @mixin where-dark {\n border-color: var(--mantine-color-dark-4);\n color: var(--mantine-color-dark-1);\n\n &:where([data-variant='default']) {\n background-color: var(--mantine-color-dark-6);\n }\n\n &:where([data-variant='subtle']) {\n background-color: var(--mantine-color-dark-7);\n }\n }\n\n &:where([data-disabled]) {\n cursor: not-allowed;\n color: var(--mantine-color-disabled-color);\n background-color: var(--mantine-color-disabled);\n }\n\n &:where([data-interactive]:not([data-disabled])) {\n cursor: pointer;\n\n @mixin hover {\n color: var(--mantine-color-bright);\n\n @mixin where-light {\n &:where([data-variant='default']) {\n background-color: var(--mantine-color-gray-0);\n }\n\n &:where([data-variant='subtle']) {\n background-color: var(--mantine-color-gray-1);\n }\n }\n\n @mixin where-dark {\n background-color: var(--mantine-color-dark-5);\n }\n }\n }\n\n &:where([data-active]) {\n background-color: var(--mantine-primary-color-light);\n color: var(--mantine-primary-color-light-color);\n\n @mixin hover {\n background-color: var(--mantine-primary-color-light-hover);\n }\n }\n}\n\n.controlIcon {\n width: var(--control-icon-size, 16px);\n height: var(--control-icon-size, 16px);\n}\n\n.controlsGroup {\n display: flex;\n background-color: var(--mantine-color-body);\n\n &:where([data-variant='default']) {\n & :where([data-rich-text-editor-control]) {\n border-radius: 0;\n\n &:where(:not(:last-of-type)) {\n border-inline-end-width: 0;\n }\n\n &:where(:last-of-type) {\n border-start-end-radius: var(--mantine-radius-default);\n border-end-end-radius: var(--mantine-radius-default);\n }\n\n &:where(:first-of-type) {\n border-start-start-radius: var(--mantine-radius-default);\n border-end-start-radius: var(--mantine-radius-default);\n }\n }\n }\n}\n\n.linkEditor {\n display: flex;\n}\n\n.linkEditorInput {\n border-start-end-radius: 0;\n border-end-end-radius: 0;\n border-inline-end: 0;\n}\n\n.linkEditorExternalControl {\n border: 1px solid;\n color: var(--mantine-color-text);\n height: 24px;\n width: 24px;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: var(--mantine-radius-default);\n\n @mixin where-light {\n background-color: var(--mantine-color-white);\n border-color: var(--mantine-color-gray-4);\n }\n\n @mixin where-dark {\n background-color: var(--mantine-color-dark-7);\n border-color: var(--mantine-color-dark-4);\n }\n\n &:where([data-active]) {\n background-color: var(--mantine-primary-color-light);\n color: var(--mantine-primary-color-filled);\n\n @mixin hover {\n background-color: var(--mantine-primary-color-light-hover);\n }\n }\n}\n\n.linkEditorSave {\n border-start-start-radius: 0;\n border-end-start-radius: 0;\n}\n\n.toolbar {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: var(--mantine-spacing-sm);\n top: var(--rte-sticky-offset, 0px);\n background-color: var(--mantine-color-body);\n z-index: 1;\n border-start-end-radius: var(--mantine-radius-default);\n border-start-start-radius: var(--mantine-radius-default);\n border-bottom: 1px solid;\n\n &:where([data-variant='default']) {\n padding: var(--mantine-spacing-xs) var(--mantine-spacing-md);\n }\n\n &:where([data-variant='subtle']) {\n padding: 4px;\n row-gap: 0;\n }\n\n @mixin where-light {\n border-color: var(--mantine-color-gray-4);\n }\n\n @mixin where-dark {\n border-color: var(--mantine-color-dark-4);\n }\n\n &:where([data-sticky]) {\n position: sticky;\n }\n}\n\n.taskList {\n list-style-type: none;\n padding: 0;\n padding-inline-start: 0;\n\n & :where(li) {\n margin: 0;\n padding: 0;\n display: flex;\n }\n\n & :where(li[data-checked] > div) {\n flex: 1 1 auto;\n min-width: 0;\n }\n\n & :where(ul) {\n margin-top: 5px;\n }\n\n & p {\n margin: 0;\n padding: 0;\n }\n\n & :where(label) {\n display: inline-block;\n }\n\n & :where(input) {\n cursor: pointer;\n appearance: none;\n width: 18px;\n height: 18px;\n border: 1px solid;\n border-radius: var(--mantine-radius-default);\n vertical-align: middle;\n position: relative;\n\n @mixin where-light {\n background-color: var(--mantine-color-white);\n border-color: var(--mantine-color-gray-4);\n }\n\n @mixin where-dark {\n background-color: var(--mantine-color-dark-6);\n border-color: var(--mantine-color-dark-4);\n }\n\n &:checked {\n background-color: var(--mantine-primary-color-filled);\n border-color: var(--mantine-primary-color-filled);\n\n &::before {\n position: absolute;\n content: '';\n inset: 0;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAxMCA3Ij48cGF0aCBmaWxsPSIjZmZmIiBkPSJNNCA0LjU4NkwxLjcwNyAyLjI5M0ExIDEgMCAxMC4yOTMgMy43MDdsMyAzYS45OTcuOTk3IDAgMDAxLjQxNCAwbDUtNUExIDEgMCAxMDguMjkzLjI5M0w0IDQuNTg2eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 10px;\n background-position: center;\n }\n }\n }\n\n & :where(li > label) {\n margin-inline-end: var(--mantine-spacing-sm);\n }\n}\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RichTextEditor.module.mjs","names":[],"sources":["../src/RichTextEditor.module.css"],"sourcesContent":[".root {\n position: relative;\n border: 1px solid;\n border-radius: var(--mantine-radius-default);\n\n @mixin where-light {\n border-color: var(--mantine-color-gray-4);\n }\n\n @mixin where-dark {\n border-color: var(--mantine-color-dark-4);\n }\n}\n\n.Typography {\n padding: 0;\n margin: 0;\n\n & li > p {\n margin: 0;\n }\n\n & ul li,\n & ol li {\n margin-top: 2px;\n }\n\n & p {\n margin-bottom: 7px;\n }\n\n & h1,\n & h2,\n & h3,\n & h4,\n & h5,\n & h6,\n & p {\n margin-top: 0;\n }\n}\n\n.content {\n background-color: var(--mantine-color-body);\n border-radius: var(--mantine-radius-default);\n\n & :global(.ProseMirror) {\n outline: 0;\n padding: var(--mantine-spacing-md);\n }\n\n & :global(.ProseMirror > *:last-child) {\n margin-bottom: 0;\n }\n\n & :global(.ProseMirror p.is-editor-empty:first-of-type::before) {\n content: attr(data-placeholder);\n pointer-events: none;\n user-select: none;\n float: left;\n height: 0;\n color: var(--mantine-color-placeholder);\n }\n\n & :global(div:not(.ProseMirror)) {\n /* Position the bubble menu above the toolbar. As it doesn't have its own selector,\n assert that the non-ProseMirror div is the bubble or floating menu */\n z-index: 2;\n }\n\n & :global(pre) {\n font-family: var(--mantine-font-family-monospace);\n border-radius: var(--mantine-radius-default);\n padding: var(--mantine-spacing-sm) var(--mantine-spacing-md);\n\n @mixin where-light {\n background-color: var(--mantine-color-gray-0);\n color: var(--mantine-color-gray-9);\n --code-color-comment: var(--mantine-color-gray-5);\n --code-color-var: var(--mantine-color-red-7);\n --code-color-number: var(--mantine-color-blue-7);\n --code-color-title: var(--mantine-color-pink-7);\n --code-color-keyword: var(--mantine-color-violet-7);\n }\n\n @mixin where-dark {\n background-color: var(--mantine-color-dark-8);\n color: var(--mantine-color-dark-1);\n --code-color-comment: var(--mantine-color-dark-2);\n --code-color-var: var(--mantine-color-red-5);\n --code-color-number: var(--mantine-color-cyan-5);\n --code-color-title: var(--mantine-color-yellow-5);\n --code-color-keyword: var(--mantine-color-violet-3);\n }\n\n & code {\n background: none !important;\n color: inherit;\n font-size: var(--mantine-font-size-sm);\n padding: 0;\n }\n\n & :global(.hljs-comment),\n & :global(.hljs-quote) {\n color: var(--code-color-comment);\n }\n\n & :global(.hljs-variable),\n & :global(.hljs-template-variable),\n & :global(.hljs-attribute),\n & :global(.hljs-tag),\n & :global(.hljs-regexp),\n & :global(.hljs-link),\n & :global(.hljs-name),\n & :global(.hljs-selector-id),\n & :global(.hljs-selector-class) {\n color: var(--code-color-var);\n }\n\n & :global(.hljs-number),\n & :global(.hljs-meta),\n & :global(.hljs-built_in),\n & :global(.hljs-builtin-name),\n & :global(.hljs-literal),\n & :global(.hljs-type),\n & :global(.hljs-params) {\n color: var(--code-color-number);\n }\n\n & :global(.hljs-string),\n & :global(.hljs-symbol),\n & :global(.hljs-bullet) {\n color: var(--code-color-var);\n }\n\n & :global(.hljs-title),\n & :global(.hljs-section) {\n color: var(--code-color-title);\n }\n\n & :global(.hljs-keyword),\n & :global(.hljs-selector-tag) {\n color: var(--code-color-keyword);\n }\n\n & :global(.hljs-emphasis) {\n font-style: italic;\n }\n\n & :global(.hljs-strong) {\n font-weight: 700;\n }\n }\n}\n\n.linkEditorDropdown {\n background-color: var(--mantine-color-body);\n}\n\n.control {\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: var(--mantine-radius-default);\n cursor: default;\n\n &:where([data-variant='default']) {\n border: 1px solid;\n min-width: 26px;\n height: 26px;\n }\n\n &:where([data-variant='subtle']) {\n --control-icon-size: 20px;\n min-width: 32px;\n height: 32px;\n }\n\n @mixin where-light {\n background-color: var(--mantine-color-white);\n border-color: var(--mantine-color-gray-4);\n color: var(--mantine-color-gray-7);\n }\n\n @mixin where-dark {\n border-color: var(--mantine-color-dark-4);\n color: var(--mantine-color-dark-1);\n\n &:where([data-variant='default']) {\n background-color: var(--mantine-color-dark-6);\n }\n\n &:where([data-variant='subtle']) {\n background-color: var(--mantine-color-dark-7);\n }\n }\n\n &:where([data-disabled]) {\n cursor: not-allowed;\n color: var(--mantine-color-disabled-color);\n background-color: var(--mantine-color-disabled);\n }\n\n &:where([data-interactive]:not([data-disabled])) {\n cursor: pointer;\n\n @mixin hover {\n color: var(--mantine-color-bright);\n\n @mixin where-light {\n &:where([data-variant='default']) {\n background-color: var(--mantine-color-gray-0);\n }\n\n &:where([data-variant='subtle']) {\n background-color: var(--mantine-color-gray-1);\n }\n }\n\n @mixin where-dark {\n background-color: var(--mantine-color-dark-5);\n }\n }\n }\n\n &:where([data-active]) {\n background-color: var(--mantine-primary-color-light);\n color: var(--mantine-primary-color-light-color);\n\n @mixin hover {\n background-color: var(--mantine-primary-color-light-hover);\n }\n }\n}\n\n.controlIcon {\n width: var(--control-icon-size, 16px);\n height: var(--control-icon-size, 16px);\n}\n\n.controlsGroup {\n display: flex;\n background-color: var(--mantine-color-body);\n\n &:where([data-variant='default']) {\n & :where([data-rich-text-editor-control]) {\n border-radius: 0;\n\n &:where(:not(:last-of-type)) {\n border-inline-end-width: 0;\n }\n\n &:where(:last-of-type) {\n border-start-end-radius: var(--mantine-radius-default);\n border-end-end-radius: var(--mantine-radius-default);\n }\n\n &:where(:first-of-type) {\n border-start-start-radius: var(--mantine-radius-default);\n border-end-start-radius: var(--mantine-radius-default);\n }\n }\n }\n}\n\n.linkEditor {\n display: flex;\n}\n\n.linkEditorInput {\n border-start-end-radius: 0;\n border-end-end-radius: 0;\n border-inline-end: 0;\n}\n\n.linkEditorExternalControl {\n border: 1px solid;\n color: var(--mantine-color-text);\n height: 24px;\n width: 24px;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: var(--mantine-radius-default);\n\n @mixin where-light {\n background-color: var(--mantine-color-white);\n border-color: var(--mantine-color-gray-4);\n }\n\n @mixin where-dark {\n background-color: var(--mantine-color-dark-7);\n border-color: var(--mantine-color-dark-4);\n }\n\n &:where([data-active]) {\n background-color: var(--mantine-primary-color-light);\n color: var(--mantine-primary-color-filled);\n\n @mixin hover {\n background-color: var(--mantine-primary-color-light-hover);\n }\n }\n}\n\n.linkEditorSave {\n border-start-start-radius: 0;\n border-end-start-radius: 0;\n}\n\n.toolbar {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: var(--mantine-spacing-sm);\n top: var(--rte-sticky-offset, 0px);\n background-color: var(--mantine-color-body);\n z-index: 1;\n border-start-end-radius: var(--mantine-radius-default);\n border-start-start-radius: var(--mantine-radius-default);\n border-bottom: 1px solid;\n\n &:where([data-variant='default']) {\n padding: var(--mantine-spacing-xs) var(--mantine-spacing-md);\n }\n\n &:where([data-variant='subtle']) {\n padding: 4px;\n row-gap: 0;\n }\n\n @mixin where-light {\n border-color: var(--mantine-color-gray-4);\n }\n\n @mixin where-dark {\n border-color: var(--mantine-color-dark-4);\n }\n\n &:where([data-sticky]) {\n position: sticky;\n }\n}\n\n.taskList {\n list-style-type: none;\n padding: 0;\n padding-inline-start: 0;\n\n & :where(li) {\n margin: 0;\n padding: 0;\n display: flex;\n }\n\n & :where(ul) {\n margin-top: 5px;\n }\n\n & p {\n margin: 0;\n padding: 0;\n }\n\n & :where(label) {\n display: inline-block;\n }\n\n & :where(input) {\n cursor: pointer;\n appearance: none;\n width: 18px;\n height: 18px;\n border: 1px solid;\n border-radius: var(--mantine-radius-default);\n vertical-align: middle;\n position: relative;\n\n @mixin where-light {\n background-color: var(--mantine-color-white);\n border-color: var(--mantine-color-gray-4);\n }\n\n @mixin where-dark {\n background-color: var(--mantine-color-dark-6);\n border-color: var(--mantine-color-dark-4);\n }\n\n &:checked {\n background-color: var(--mantine-primary-color-filled);\n border-color: var(--mantine-primary-color-filled);\n\n &::before {\n position: absolute;\n content: '';\n inset: 0;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAxMCA3Ij48cGF0aCBmaWxsPSIjZmZmIiBkPSJNNCA0LjU4NkwxLjcwNyAyLjI5M0ExIDEgMCAxMC4yOTMgMy43MDdsMyAzYS45OTcuOTk3IDAgMDAxLjQxNCAwbDUtNUExIDEgMCAxMDguMjkzLjI5M0w0IDQuNTg2eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 10px;\n background-position: center;\n }\n }\n }\n\n & :where(li > label) {\n margin-inline-end: var(--mantine-spacing-sm);\n }\n}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"RichTextEditor.module.mjs","names":[],"sources":["../src/RichTextEditor.module.css"],"sourcesContent":[".root {\n position: relative;\n border: 1px solid;\n border-radius: var(--mantine-radius-default);\n\n @mixin where-light {\n border-color: var(--mantine-color-gray-4);\n }\n\n @mixin where-dark {\n border-color: var(--mantine-color-dark-4);\n }\n}\n\n.Typography {\n padding: 0;\n margin: 0;\n\n & li > p {\n margin: 0;\n }\n\n & ul li,\n & ol li {\n margin-top: 2px;\n }\n\n & p {\n margin-bottom: 7px;\n }\n\n & h1,\n & h2,\n & h3,\n & h4,\n & h5,\n & h6,\n & p {\n margin-top: 0;\n }\n}\n\n.content {\n background-color: var(--mantine-color-body);\n border-radius: var(--mantine-radius-default);\n\n & :global(.ProseMirror) {\n outline: 0;\n padding: var(--mantine-spacing-md);\n }\n\n & :global(.ProseMirror > *:last-child) {\n margin-bottom: 0;\n }\n\n & :global(.ProseMirror p.is-editor-empty:first-of-type::before) {\n content: attr(data-placeholder);\n pointer-events: none;\n user-select: none;\n float: left;\n height: 0;\n color: var(--mantine-color-placeholder);\n }\n\n & :global(div:not(.ProseMirror)) {\n /* Position the bubble menu above the toolbar. As it doesn't have its own selector,\n assert that the non-ProseMirror div is the bubble or floating menu */\n z-index: 2;\n }\n\n & :global(pre) {\n font-family: var(--mantine-font-family-monospace);\n border-radius: var(--mantine-radius-default);\n padding: var(--mantine-spacing-sm) var(--mantine-spacing-md);\n\n @mixin where-light {\n background-color: var(--mantine-color-gray-0);\n color: var(--mantine-color-gray-9);\n --code-color-comment: var(--mantine-color-gray-5);\n --code-color-var: var(--mantine-color-red-7);\n --code-color-number: var(--mantine-color-blue-7);\n --code-color-title: var(--mantine-color-pink-7);\n --code-color-keyword: var(--mantine-color-violet-7);\n }\n\n @mixin where-dark {\n background-color: var(--mantine-color-dark-8);\n color: var(--mantine-color-dark-1);\n --code-color-comment: var(--mantine-color-dark-2);\n --code-color-var: var(--mantine-color-red-5);\n --code-color-number: var(--mantine-color-cyan-5);\n --code-color-title: var(--mantine-color-yellow-5);\n --code-color-keyword: var(--mantine-color-violet-3);\n }\n\n & code {\n background: none !important;\n color: inherit;\n font-size: var(--mantine-font-size-sm);\n padding: 0;\n }\n\n & :global(.hljs-comment),\n & :global(.hljs-quote) {\n color: var(--code-color-comment);\n }\n\n & :global(.hljs-variable),\n & :global(.hljs-template-variable),\n & :global(.hljs-attribute),\n & :global(.hljs-tag),\n & :global(.hljs-regexp),\n & :global(.hljs-link),\n & :global(.hljs-name),\n & :global(.hljs-selector-id),\n & :global(.hljs-selector-class) {\n color: var(--code-color-var);\n }\n\n & :global(.hljs-number),\n & :global(.hljs-meta),\n & :global(.hljs-built_in),\n & :global(.hljs-builtin-name),\n & :global(.hljs-literal),\n & :global(.hljs-type),\n & :global(.hljs-params) {\n color: var(--code-color-number);\n }\n\n & :global(.hljs-string),\n & :global(.hljs-symbol),\n & :global(.hljs-bullet) {\n color: var(--code-color-var);\n }\n\n & :global(.hljs-title),\n & :global(.hljs-section) {\n color: var(--code-color-title);\n }\n\n & :global(.hljs-keyword),\n & :global(.hljs-selector-tag) {\n color: var(--code-color-keyword);\n }\n\n & :global(.hljs-emphasis) {\n font-style: italic;\n }\n\n & :global(.hljs-strong) {\n font-weight: 700;\n }\n }\n}\n\n.linkEditorDropdown {\n background-color: var(--mantine-color-body);\n}\n\n.control {\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: var(--mantine-radius-default);\n cursor: default;\n\n &:where([data-variant='default']) {\n border: 1px solid;\n min-width: 26px;\n height: 26px;\n }\n\n &:where([data-variant='subtle']) {\n --control-icon-size: 20px;\n min-width: 32px;\n height: 32px;\n }\n\n @mixin where-light {\n background-color: var(--mantine-color-white);\n border-color: var(--mantine-color-gray-4);\n color: var(--mantine-color-gray-7);\n }\n\n @mixin where-dark {\n border-color: var(--mantine-color-dark-4);\n color: var(--mantine-color-dark-1);\n\n &:where([data-variant='default']) {\n background-color: var(--mantine-color-dark-6);\n }\n\n &:where([data-variant='subtle']) {\n background-color: var(--mantine-color-dark-7);\n }\n }\n\n &:where([data-disabled]) {\n cursor: not-allowed;\n color: var(--mantine-color-disabled-color);\n background-color: var(--mantine-color-disabled);\n }\n\n &:where([data-interactive]:not([data-disabled])) {\n cursor: pointer;\n\n @mixin hover {\n color: var(--mantine-color-bright);\n\n @mixin where-light {\n &:where([data-variant='default']) {\n background-color: var(--mantine-color-gray-0);\n }\n\n &:where([data-variant='subtle']) {\n background-color: var(--mantine-color-gray-1);\n }\n }\n\n @mixin where-dark {\n background-color: var(--mantine-color-dark-5);\n }\n }\n }\n\n &:where([data-active]) {\n background-color: var(--mantine-primary-color-light);\n color: var(--mantine-primary-color-light-color);\n\n @mixin hover {\n background-color: var(--mantine-primary-color-light-hover);\n }\n }\n}\n\n.controlIcon {\n width: var(--control-icon-size, 16px);\n height: var(--control-icon-size, 16px);\n}\n\n.controlsGroup {\n display: flex;\n background-color: var(--mantine-color-body);\n\n &:where([data-variant='default']) {\n & :where([data-rich-text-editor-control]) {\n border-radius: 0;\n\n &:where(:not(:last-of-type)) {\n border-inline-end-width: 0;\n }\n\n &:where(:last-of-type) {\n border-start-end-radius: var(--mantine-radius-default);\n border-end-end-radius: var(--mantine-radius-default);\n }\n\n &:where(:first-of-type) {\n border-start-start-radius: var(--mantine-radius-default);\n border-end-start-radius: var(--mantine-radius-default);\n }\n }\n }\n}\n\n.linkEditor {\n display: flex;\n}\n\n.linkEditorInput {\n border-start-end-radius: 0;\n border-end-end-radius: 0;\n border-inline-end: 0;\n}\n\n.linkEditorExternalControl {\n border: 1px solid;\n color: var(--mantine-color-text);\n height: 24px;\n width: 24px;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: var(--mantine-radius-default);\n\n @mixin where-light {\n background-color: var(--mantine-color-white);\n border-color: var(--mantine-color-gray-4);\n }\n\n @mixin where-dark {\n background-color: var(--mantine-color-dark-7);\n border-color: var(--mantine-color-dark-4);\n }\n\n &:where([data-active]) {\n background-color: var(--mantine-primary-color-light);\n color: var(--mantine-primary-color-filled);\n\n @mixin hover {\n background-color: var(--mantine-primary-color-light-hover);\n }\n }\n}\n\n.linkEditorSave {\n border-start-start-radius: 0;\n border-end-start-radius: 0;\n}\n\n.toolbar {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: var(--mantine-spacing-sm);\n top: var(--rte-sticky-offset, 0px);\n background-color: var(--mantine-color-body);\n z-index: 1;\n border-start-end-radius: var(--mantine-radius-default);\n border-start-start-radius: var(--mantine-radius-default);\n border-bottom: 1px solid;\n\n &:where([data-variant='default']) {\n padding: var(--mantine-spacing-xs) var(--mantine-spacing-md);\n }\n\n &:where([data-variant='subtle']) {\n padding: 4px;\n row-gap: 0;\n }\n\n @mixin where-light {\n border-color: var(--mantine-color-gray-4);\n }\n\n @mixin where-dark {\n border-color: var(--mantine-color-dark-4);\n }\n\n &:where([data-sticky]) {\n position: sticky;\n }\n}\n\n.taskList {\n list-style-type: none;\n padding: 0;\n padding-inline-start: 0;\n\n & :where(li) {\n margin: 0;\n padding: 0;\n display: flex;\n }\n\n & :where(li[data-checked] > div) {\n flex: 1 1 auto;\n min-width: 0;\n }\n\n & :where(ul) {\n margin-top: 5px;\n }\n\n & p {\n margin: 0;\n padding: 0;\n }\n\n & :where(label) {\n display: inline-block;\n }\n\n & :where(input) {\n cursor: pointer;\n appearance: none;\n width: 18px;\n height: 18px;\n border: 1px solid;\n border-radius: var(--mantine-radius-default);\n vertical-align: middle;\n position: relative;\n\n @mixin where-light {\n background-color: var(--mantine-color-white);\n border-color: var(--mantine-color-gray-4);\n }\n\n @mixin where-dark {\n background-color: var(--mantine-color-dark-6);\n border-color: var(--mantine-color-dark-4);\n }\n\n &:checked {\n background-color: var(--mantine-primary-color-filled);\n border-color: var(--mantine-primary-color-filled);\n\n &::before {\n position: absolute;\n content: '';\n inset: 0;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAxMCA3Ij48cGF0aCBmaWxsPSIjZmZmIiBkPSJNNCA0LjU4NkwxLjcwNyAyLjI5M0ExIDEgMCAxMC4yOTMgMy43MDdsMyAzYS45OTcuOTk3IDAgMDAxLjQxNCAwbDUtNUExIDEgMCAxMDguMjkzLjI5M0w0IDQuNTg2eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 10px;\n background-position: center;\n }\n }\n }\n\n & :where(li > label) {\n margin-inline-end: var(--mantine-spacing-sm);\n }\n}\n"],"mappings":""}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mantine/tiptap",
|
|
3
|
-
"version": "9.0.
|
|
3
|
+
"version": "9.0.2",
|
|
4
4
|
"description": "Rich text editor based on tiptap",
|
|
5
5
|
"homepage": "https://mantine.dev/x/tiptap",
|
|
6
6
|
"license": "MIT",
|
|
@@ -44,8 +44,8 @@
|
|
|
44
44
|
"directory": "packages/@mantine/tiptap"
|
|
45
45
|
},
|
|
46
46
|
"peerDependencies": {
|
|
47
|
-
"@mantine/core": "9.0.
|
|
48
|
-
"@mantine/hooks": "9.0.
|
|
47
|
+
"@mantine/core": "9.0.2",
|
|
48
|
+
"@mantine/hooks": "9.0.2",
|
|
49
49
|
"@tiptap/extension-link": ">=3.3.0",
|
|
50
50
|
"@tiptap/react": ">=3.3.0",
|
|
51
51
|
"react": "^19.2.0",
|
package/styles.css
CHANGED
package/styles.layer.css
CHANGED