Kup-editor: css loading through theme

smeup · Jan 29, 2024 · d441c3d · d441c3d
1 parent cfd0cc5
commit d441c3d
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 14 deletions.
diff --git a/...src/components/kup-editor/kup-editor.scss → .../src/components/kup-editor/kup-editor.css b/...src/components/kup-editor/kup-editor.scss → .../src/components/kup-editor/kup-editor.css
@@ -1,7 +1,3 @@
-@import '../../../node_modules/@toast-ui/editor/dist/toastui-editor.css';
-@import '../../../node_modules/@toast-ui/editor/dist/toastui-editor-viewer.css';
-@import '../../../node_modules/codemirror/lib/codemirror.css';
-
 /**
 * @prop --kup-editor-height: height of the component.
 */

diff --git a/packages/ketchup/src/components/kup-editor/kup-editor.tsx b/packages/ketchup/src/components/kup-editor/kup-editor.tsx
@@ -35,8 +35,8 @@ import { getProps, setProps } from '../../utils/utils';
 
 @Component({
     tag: 'kup-editor',
-    styleUrl: 'kup-editor.scss',
-    shadow: true,
+    styleUrl: '',
+    shadow: false,
 })
 export class KupEditor {
     /**

diff --git a/packages/ketchup/src/components/kup-editor/readme.md b/packages/ketchup/src/components/kup-editor/readme.md
@@ -81,13 +81,6 @@ Type: `Promise<void>`
 
 
 
-## CSS Custom Properties
-
-| Name                  | Description              |
-| --------------------- | ------------------------ |
-| `--kup-editor-height` | height of the component. |
-
-
 ## Dependencies
 
 ### Depends on

diff --git a/packages/ketchup/src/managers/kup-theme/kup-theme.ts b/packages/ketchup/src/managers/kup-theme/kup-theme.ts
@@ -20,6 +20,10 @@ import * as fRatingCSS from '../../f-components/f-rating/f-rating.css';
 import * as fSwitchCSS from '../../f-components/f-switch/f-switch.css';
 import * as fTextFieldCSS from '../../f-components/f-text-field/f-text-field.css';
 import * as rippleCSS from './mdc-ripple.css';
+import * as editorCSS from '../../../node_modules/@toast-ui/editor/dist/toastui-editor.css';
+import * as viewerCSS from '../../../node_modules/@toast-ui/editor/dist/toastui-editor-viewer.css';
+import * as codemirrorCSS from '../../../node_modules/codemirror/lib/codemirror.css';
+import * as kupEditorCSS from '../../components/kup-editor/kup-editor.css'
 import {
     fButtonUsers,
     fCellUsers,
@@ -174,7 +178,12 @@ export class KupTheme {
             this.cssVariables() +
             this.icons() +
             '}' +
-            applicationCSS['default'];
+            applicationCSS['default'] +
+            editorCSS['default'] +
+            viewerCSS['default'] +
+            codemirrorCSS['default'] +
+            kupEditorCSS['default']
+            ;
         this.customStyle();
 
         document.documentElement.setAttribute('kup-theme', this.name);