@web-atoms/web-controls 2.4.65 → 2.4.67

package/src/html-editor/commands/ChangeColor.local.less

@@ -0,0 +1,23 @@
+.web-controls-html-editor-change-color {
+    width: 400px;
+    display: flex;
+    justify-content: space-evenly;
+
+    & > table {
+        display: inline-table; 
+    }
+
+    & .color-button {
+        display: inline-block;
+        width: 20px;
+        height: 20px;
+        border-width: 1px;
+        margin: 1px;
+        cursor: pointer;
+        border-style: solid;
+        border-color: transparent; 
+        &:hover {
+            border-color: black; 
+        }
+    }     
+}

package/src/html-editor/commands/ChangeColor.tsx

@@ -2,8 +2,7 @@ import Bind from "@web-atoms/core/dist/core/Bind";
 import XNode from "@web-atoms/core/dist/core/XNode";
 import PopupButton from "../../basic/PopupButton";
 import type AtomHtmlEditor from "../AtomHtmlEditor";
-import styled from "@web-atoms/core/dist/style/styled";
-
+import "./ChangeColor.local.less";
 const gray = [
     "rgb(0,0,0)",
     "rgb(68,68,68)",
@@ -89,30 +88,7 @@ const all = [
     ]
 ];
 
-const colorSelectorCss = styled.css `
-
-    width: 400px;
-    display: flex;
-    justify-content: space-evenly;
-
-    & > table {
-        display: inline-table; 
-    }
-    
-    & .color-button {
-        display: inline-block;
-        width: 20px;
-        height: 20px;
-        border-width: 1px;
-        margin: 1px;
-        cursor: pointer;
-        border-style: solid;
-        border-color: transparent; 
-        &:hover {
-            border-color: black; 
-        }
-    }    
-    `.installLocal();
+const colorSelectorCss = "web-controls-html-editor-change-color";
 
 function TextColor(color: string) {
     return <div

package/src/html-editor/commands/ChangeFont.local.less

@@ -0,0 +1,4 @@
+.web-controls-html-editor-change-font {
+    padding: 5px;
+    width: 170px;
+}

package/src/html-editor/commands/ChangeFont.tsx

@@ -2,12 +2,9 @@ import Bind from "@web-atoms/core/dist/core/Bind";
 import XNode from "@web-atoms/core/dist/core/XNode";
 import PopupButton, { MenuItem } from "../../basic/PopupButton";
 import type AtomHtmlEditor from "../AtomHtmlEditor";
-import styled from "@web-atoms/core/dist/style/styled";
+import "./ChangeFont.local.less";
 
-const fontMenuCSS = styled.css `
-    padding: 5px;
-    width: 170px;
-`.installLocal();
+const fontMenuCSS = "web-controls-html-editor-change-font";
 
 const fonts: Array<[string, string[]]> = [
     ["Sans Serif", ["arial", "sans-serif"]],

package/src/html-editor/commands/Separator.global.less

@@ -0,0 +1,10 @@
+[data-toolbar-item=separator] {
+    background-color: #a9a9a9;
+    margin-left: 4px;
+    margin-right: 4px;
+    display: inline-block;
+    margin-top: 4px;
+    height: 1rem;
+    width: 2px;
+    padding: 0;
+}

package/src/html-editor/commands/Separator.tsx

@@ -1,17 +1,7 @@
 import XNode from "@web-atoms/core/dist/core/XNode";
-import styled from "@web-atoms/core/dist/style/styled";
 
-const separatorCss = styled.css `
-    background-color: #a9a9a9;
-    margin-left: 4px;
-    margin-right: 4px;
-    display: inline-block;
-    margin-top: 4px;
-    height: 1rem;
-    width: 2px;
-    padding: 0;
-    `.installLocal();
+import "./Separator.global.less";
 
 export default function Separator() {
-    return <div class={separatorCss}></div>;
+    return <div data-toolbar-item="separator"/>;
 }

package/src/html-editor/commands/Source.local.less

@@ -0,0 +1,3 @@
+.web-controls-html-editor-source {
+
+}

package/src/html-editor/commands/Source.tsx

@@ -5,14 +5,9 @@ import PopupService, { PopupWindow } from "@web-atoms/core/dist/web/services/Pop
 import type AtomHtmlEditor from "../AtomHtmlEditor";
 import CommandButton from "./CommandButton";
 import HtmlCommands from "./HtmlCommands";
-import styled from "@web-atoms/core/dist/style/styled";
+import "./Source.local.less";
 
-const css = styled.css `
-    & > textarea {
-        min-height: 500px;
-        min-width: 700px;
-    }
-`.installLocal();
+const css = "web-controls-html-editor-source";
 
 async function showDialog(s: AtomHtmlEditor, e: Event): Promise<string> {