@eccenca/gui-elements 25.0.0 → 25.1.0-rc.1

package/src/components/Tag/stories/TagList.stories.tsx

@@ -8,7 +8,7 @@ export default {
     component: TagList,
     argTypes: {
         children: {
-            control: "none",
+            control: false,
         },
     },
 } as Meta<typeof TagList>;
@@ -18,5 +18,5 @@ const Template: StoryFn<typeof TagList> = (args) => <TagList {...args} />;
 export const List = Template.bind({});
 List.args = {
     label: "Tag list",
-    children: [<Tag>Short</Tag>, <Tag>List</Tag>, <Tag>Of</Tag>, <Tag>Tags</Tag>],
+    children: [<Tag small>Short</Tag>, <Tag>List</Tag>, <Tag>Of</Tag>, <Tag large>Tags</Tag>],
 };

package/src/components/Tag/tag.scss

@@ -30,12 +30,15 @@ $tag-round-adjustment: 0 !default;
 @import "~@blueprintjs/core/src/components/tag/tag";
 
 .#{$eccgui}-tag__item {
+    --eccgui-tag-border-width: 1px;
+
     flex-grow: 0;
     flex-shrink: 0;
     min-width: calc(#{$tag-height} - 2px);
     min-height: calc(#{$tag-height} - 2px);
     max-height: calc(#{$tag-height} - 2px);
     padding: 0 $tag-padding-top;
+    line-height: calc(#{$tag-height} - 2px);
 
     &.#{$ns}-round {
         border-radius: $tag-height * 0.5;
@@ -55,11 +58,12 @@ $tag-round-adjustment: 0 !default;
     }
 
     &.#{$eccgui}-tag--small {
-        min-width: calc(#{$tag-height-small} + #{$tag-padding-small} - 2px);
-        min-height: calc(#{$tag-height-small} + #{$tag-padding-small} - 2px);
-        max-height: calc(#{$tag-height-small} + #{$tag-padding-small} - 2px);
+        min-width: calc(#{$tag-height-small} + #{$tag-padding-small});
+        min-height: calc(#{$tag-height-small} + #{$tag-padding-small});
+        max-height: calc(#{$tag-height-small} + #{$tag-padding-small});
         padding: 0 $tag-padding-small;
-        line-height: calc(#{$tag-height-small} - 2px);
+        font-size: calc(#{$eccgui-size-typo-tag} - 1px);
+        line-height: calc(#{$tag-height-small} + #{$tag-padding-small});
 
         &.#{$ns}-round {
             border-radius: $tag-height-small * 0.5;
@@ -75,7 +79,7 @@ $tag-round-adjustment: 0 !default;
         min-height: calc(#{$tag-height-large} + #{$tag-padding-large} - 2px);
         max-height: calc(#{$tag-height-large} + #{$tag-padding-large} - 2px);
         font-size: $eccgui-size-typo-tag-large;
-        line-height: calc(#{$tag-height-large} - 2px);
+        line-height: calc(#{$tag-height-large} + #{$tag-padding-large} - 2px);
 
         &.#{$ns}-round {
             border-radius: $tag-height-large * 0.5;
@@ -138,7 +142,7 @@ $tag-round-adjustment: 0 !default;
 
 .#{$ns}-tag {
     border-style: solid;
-    border-width: 1px;
+    border-width: var(--eccgui-tag-border-width);
 
     &:not([class*="#{$ns}-intent-"]) {
         --eccgui-tag-bg: #{$tag-default-color};
@@ -151,7 +155,7 @@ $tag-round-adjustment: 0 !default;
             var(--eccgui-tag-bg) var(--eccgui-tag-emfactor),
             eccgui-color-var("identity", "background", "100")
         );
-        border-color: var(--eccgui-tag-border);
+        border-color: eccgui-color-rgba(var(--eccgui-tag-border), calc(0.25 * var(--eccgui-tag-emfactor)));
 
         &.#{$eccgui}-tag--strongeremphasis {
             --eccgui-tag-emfactor: 95%;
@@ -211,7 +215,7 @@ $tag-round-adjustment: 0 !default;
                 var(--eccgui-tag-bg) var(--eccgui-tag-emfactor),
                 eccgui-color-var("identity", "background", "100")
             );
-            border-color: var(--eccgui-tag-border);
+            border-color: eccgui-color-rgba(var(--eccgui-tag-border), calc(0.25 * var(--eccgui-tag-emfactor)));
 
             &.#{$eccgui}-tag--strongeremphasis {
                 --eccgui-tag-emfactor: 100%;
@@ -231,7 +235,7 @@ $tag-round-adjustment: 0 !default;
 
             &[class*="#{$eccgui}-intent--"] {
                 color: eccgui-color-rgba(var(--eccgui-tag-text), var(--eccgui-tag-emfactor));
-                border-color: eccgui-color-rgba(var(--eccgui-tag-border), var(--eccgui-tag-emfactor));
+                border-color: eccgui-color-rgba(var(--eccgui-tag-border), calc(0.25 * var(--eccgui-tag-emfactor)));
             }
 
             &.#{$eccgui}-intent--primary {
@@ -267,3 +271,9 @@ $tag-round-adjustment: 0 !default;
         }
     }
 }
+
+@media print {
+    .#{$eccgui}-tag__item {
+        print-color-adjust: exact;
+    }
+}

package/src/components/TextReducer/TextReducer.test.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import {render, RenderResult} from "@testing-library/react";
+import { render, RenderResult } from "@testing-library/react";
 
 import "@testing-library/jest-dom";
 
@@ -9,10 +9,10 @@ import { Default as TextReducerStory } from "./TextReducer.stories";
 describe("TextReducer", () => {
     const textMustExist = (queryByText: RenderResult["queryByText"], text: string) => {
         expect(queryByText(text, { exact: false })).not.toBeNull();
-    }
+    };
     const textMustNotExist = (queryByText: RenderResult["queryByText"], text: string) => {
         expect(queryByText(text, { exact: false })).toBeNull();
-    }
+    };
     it("should display encoded HTML entities by default if they are used in the transformed markup", () => {
         const { queryByText } = render(<TextReducer {...TextReducerStory.args} />);
         textMustExist(queryByText, "&#x27;entities&#x27; &amp; &quot;quotes&quot;");

package/src/components/Typography/InlineText.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import { TestableComponent } from "../interfaces";
+
+export interface InlineTextProps extends React.HTMLAttributes<HTMLElement>, TestableComponent {
+    /**
+     * Additional CSS class name.
+     */
+    className?: string;
+}
+
+/**
+ * Forces all children to be displayed as inline content.
+ */
+export const InlineText = ({ className = "", children, ...otherProps }: InlineTextProps) => {
+    return (
+        <div {...otherProps} className={`${eccgui}-typography__inlinetext` + (className ? " " + className : "")}>
+            {children}
+        </div>
+    );
+};
+
+export default InlineText;

package/src/components/Typography/_reset.scss

@@ -7,6 +7,7 @@ select,
 input,
 textarea {
     font-family: inherit;
+    font-size-adjust: inherit;
     border-radius: 0;
 }
 

package/src/components/Typography/index.ts

@@ -2,3 +2,4 @@ export * from "./Highlighter";
 export * from "./HtmlContentBlock";
 export * from "./OverflowText";
 export * from "./WhiteSpaceContainer";
+export * from "./InlineText";

package/src/components/Typography/stories/InlineText.stories.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { Meta, StoryFn } from "@storybook/react";
+
+import { InlineText } from "../InlineText";
+
+import overflowTextConfig from "./OverflowText.stories";
+
+const config = {
+    title: "Components/Typography/InlineText",
+    component: InlineText,
+    argTypes: {
+        children: overflowTextConfig.argTypes?.children,
+    },
+} as Meta<typeof InlineText>;
+export default config;
+
+const Template: StoryFn<typeof InlineText> = (args) => <InlineText {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+    children: (
+        <div>
+            <div>Block line 1.</div>
+            <div>Block line 2.</div>
+        </div>
+    ),
+};

package/src/components/Typography/typography.scss

@@ -17,6 +17,11 @@ body {
     text-rendering: optimizelegibility;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
+    // User-facing text may contain Unicode symbols (e.g. "★") that fall outside the primary font stack.
+    // Browsers pick different system fallback fonts for such characters, causing glyphs to render at
+    // different optical sizes (smaller in Firefox). font-size-adjust normalises the fallback font size
+    // by matching the primary font's x-height, reducing the visual size discrepancy across browsers.
+    font-size-adjust: from-font;
 }
 
 code {
@@ -68,6 +73,11 @@ mark {
     line-height: $eccgui-size-typo-caption-lineheight;
 }
 
+.#{$eccgui}-typography__contentblock.#{$eccgui}-typography--large {
+    font-size: $eccgui-size-typo-subtitle;
+    line-height: $eccgui-size-typo-subtitle-lineheight;
+}
+
 h1 {
     .#{$eccgui}-typography__contentblock &,
     &.#{$eccgui}-typography__text {
@@ -223,9 +233,9 @@ table {
     max-width: 100%;
     overflow: hidden;
     text-overflow: ellipsis;
+    vertical-align: middle;
     overflow-wrap: normal;
     white-space: nowrap;
-    vertical-align: middle;
 }
 
 .#{$eccgui}-typography__overflowtext--inline {
@@ -241,8 +251,8 @@ table {
 }
 
 .#{$eccgui}-typography__overflowtext--ellipsis-reverse {
-    text-align: left;
     text-overflow: ellipsis;
+    text-align: left;
     direction: rtl;
     unicode-bidi: embed;
 
@@ -263,6 +273,22 @@ table {
     }
 }
 
+// InlineText
+
+.#{$eccgui}-typography__inlinetext {
+    display: inline;
+
+    * {
+        display: inline;
+
+        & + * {
+            &::before {
+                content: " ";
+            }
+        }
+    }
+}
+
 // helpers
 
 .#{$eccgui}-typography--nooverflow {

package/src/components/VisualTour/VisualTour.tsx

@@ -1,7 +1,5 @@
 import React from "react";
 import { createPortal } from "react-dom";
-import { Classes as BlueprintClasses } from "@blueprintjs/core";
-import { createPopper } from "@popperjs/core";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import {
@@ -14,6 +12,7 @@ import {
     CardHeader,
     CardOptions,
     CardTitle,
+    DecoupledOverlay,
     IconButton,
     Markdown,
     ModalSize,
@@ -130,7 +129,7 @@ export const VisualTour = ({
                     <Button
                         key={"next"}
                         variant="outlined"
-                        intent={"primary"}
+                        elevated
                         onClick={() => {
                             setCurrentStepIndex(currentStepIndex + 1);
                         }}
@@ -144,7 +143,7 @@ export const VisualTour = ({
                         text={closeLabel}
                         onClick={closeTour}
                         variant="outlined"
-                        intent={"primary"}
+                        elevated
                         rightIcon={"navigation-close"}
                     />
                 ),
@@ -292,25 +291,6 @@ interface StepPopoverProps {
 
 /** Popover that is displayed and points at the highlighted element. */
 const StepPopover = ({ highlightedElement, step, titleOption, actionButtons }: StepPopoverProps) => {
-    const tooltipRef = React.useCallback(
-        (tooltip: HTMLDivElement | null) => {
-            if (tooltip) {
-                createPopper(highlightedElement, tooltip, {
-                    placement: "auto",
-                    modifiers: [
-                        {
-                            name: "offset",
-                            options: {
-                                offset: [0, 15],
-                            },
-                        },
-                    ],
-                });
-            }
-        },
-        [highlightedElement]
-    );
-
     const backdropRef = React.useCallback(
         (backdrop: HTMLDivElement | null) => {
             const highlightStencil = () => {
@@ -340,39 +320,39 @@ const StepPopover = ({ highlightedElement, step, titleOption, actionButtons }: S
         [highlightedElement]
     );
 
+    // map to only tooltip size because the `DecoupledOverlay` only supports them
+    let overlaySize: TooltipSize = "large";
+    switch (step.size) {
+        case "tiny":
+            overlaySize = "small";
+            break;
+        case "regular":
+            overlaySize = "medium";
+            break;
+        case "xlarge":
+        case "fullscreen":
+            overlaySize = "large";
+            break;
+    }
+
     return createPortal(
         <div className={`${eccgui}-visual-tour`}>
             <div className={`${eccgui}-visual-tour__focushelper`} ref={backdropRef} />
             <div>
                 <div className={`${eccgui}-visual-tour__backdrop`} />
             </div>
-            <div
-                className={
-                    `${eccgui}-visual-tour__overlay` +
-                    ` ${eccgui}-visual-tour__overlay--${step.size ?? "large"}` +
-                    ` ${BlueprintClasses.POPOVER}`
-                }
-                role="tooltip"
-                ref={tooltipRef}
-            >
-                <div
-                    className={`${eccgui}-visual-tour__arrow ${BlueprintClasses.POPOVER_ARROW}`}
-                    data-popper-arrow
-                    aria-hidden
-                />
-                <div className={`${BlueprintClasses.POPOVER_CONTENT} ${eccgui}-visual-tour__overlay__content`}>
-                    <Card isOnlyLayout elevation={-1} whitespaceAmount="small">
-                        <CardHeader>
-                            <CardTitle>{step.title}</CardTitle>
-                            <CardOptions>{titleOption}</CardOptions>
-                        </CardHeader>
-                        <CardContent>
-                            <StepContent step={step} />
-                        </CardContent>
-                        <CardActions inverseDirection>{actionButtons}</CardActions>
-                    </Card>
-                </div>
-            </div>
+            <DecoupledOverlay targetSelectorOrElement={highlightedElement} size={overlaySize} usePortal={false}>
+                <Card isOnlyLayout elevation={-1} whitespaceAmount="small">
+                    <CardHeader>
+                        <CardTitle>{step.title}</CardTitle>
+                        <CardOptions>{titleOption}</CardOptions>
+                    </CardHeader>
+                    <CardContent>
+                        <StepContent step={step} />
+                    </CardContent>
+                    <CardActions inverseDirection>{actionButtons}</CardActions>
+                </Card>
+            </DecoupledOverlay>
         </div>,
         document.body
     );

package/src/components/VisualTour/visualTour.scss

@@ -31,40 +31,6 @@
     opacity: 0;
 }
 
-.#{$eccgui}-visual-tour__arrow {
-    &::before {
-        background: $card-background-color;
-    }
-
-    .#{$eccgui}-visual-tour__overlay[data-popper-placement="top"] & {
-        bottom: -0.5 * $eccgui-size-block-whitespace;
-    }
-    .#{$eccgui}-visual-tour__overlay[data-popper-placement="right"] & {
-        left: -0.5 * $eccgui-size-block-whitespace;
-    }
-    .#{$eccgui}-visual-tour__overlay[data-popper-placement="bottom"] & {
-        top: -0.5 * $eccgui-size-block-whitespace;
-    }
-    .#{$eccgui}-visual-tour__overlay[data-popper-placement="left"] & {
-        right: -0.5 * $eccgui-size-block-whitespace;
-    }
-}
-
-.#{$eccgui}-visual-tour__overlay {
-    z-index: 8002; // 2 over application header
-    &--small {
-        @extend .#{$eccgui}-tooltip--small;
-    }
-
-    &--medium {
-        @extend .#{$eccgui}-tooltip--medium;
-    }
-
-    &--large {
-        @extend .#{$eccgui}-tooltip--large;
-    }
-}
-
 .#{$eccgui}-card__content {
     .#{$eccgui}-visual-tour__overlay__content & {
         max-height: 45vh;

package/src/components/index.scss

@@ -5,6 +5,7 @@
 @import "./Card/card";
 @import "./Chat/chat";
 @import "./Checkbox/checkbox";
+@import "./DecoupledOverlay/decoupledoverlay";
 @import "./Depiction/depiction";
 @import "./Dialog/dialog";
 @import "./FlexibleLayout/flexiblelayout";

package/src/components/index.ts

@@ -9,6 +9,7 @@ export * from "./Checkbox/Checkbox";
 export * from "./CodeAutocompleteField";
 export * from "./ContentGroup/ContentGroup";
 export * from "./ContextOverlay";
+export * from "./DecoupledOverlay/DecoupledOverlay";
 export * from "./Depiction/Depiction";
 export * from "./Dialog";
 export * from "./FlexibleLayout";

package/src/configuration/_customproperties.scss

@@ -0,0 +1,32 @@
+/**
+ * We mirror our SCSS variables here to improve availability in inline styles
+ * and module styles without included SCSS config stack.
+ * Colors are set in `src/components/Application/_colors.scss`.
+ */
+
+:root {
+    --#{$eccgui}-size-typo-caption: #{$eccgui-size-typo-caption};
+    --#{$eccgui}-size-typo-caption-lineheight: #{$eccgui-size-typo-caption-lineheight};
+    --#{$eccgui}-size-typo-text: #{$eccgui-size-typo-text};
+    --#{$eccgui}-size-typo-text-lineheight: #{$eccgui-size-typo-text-lineheight};
+    --#{$eccgui}-size-typo-subtitle: #{$eccgui-size-typo-subtitle};
+    --#{$eccgui}-size-typo-subtitle-lineheight: #{$eccgui-size-typo-subtitle-lineheight};
+    --#{$eccgui}-size-typo-title: #{$eccgui-size-typo-title};
+    --#{$eccgui}-size-typo-title-lineheight: #{$eccgui-size-typo-title-lineheight};
+    --#{$eccgui}-size-typo-headline: #{$eccgui-size-typo-headline};
+    --#{$eccgui}-size-typo-headline-lineheight: #{$eccgui-size-typo-headline-lineheight};
+    --#{$eccgui}-font-weight-light: #{$eccgui-font-weight-light};
+    --#{$eccgui}-font-weight-regular: #{$eccgui-font-weight-regular};
+    --#{$eccgui}-font-weight-bold: #{$eccgui-font-weight-bold};
+    --#{$eccgui}-font-spacing-condensed: #{$eccgui-font-spacing-condensed};
+    --#{$eccgui}-font-spacing-regular: #{$eccgui-font-spacing-regular};
+    --#{$eccgui}-font-spacing-wide: #{$eccgui-font-spacing-wide};
+    --#{$eccgui}-size-block-whitespace: #{$eccgui-size-block-whitespace};
+    --#{$eccgui}-size-inline-whitespace: #{$eccgui-size-inline-whitespace};
+    --#{$eccgui}-opacity-regular: #{$eccgui-opacity-regular};
+    --#{$eccgui}-opacity-narrow: #{$eccgui-opacity-narrow};
+    --#{$eccgui}-opacity-muted: #{$eccgui-opacity-muted};
+    --#{$eccgui}-opacity-disabled: #{$eccgui-opacity-disabled};
+    --#{$eccgui}-opacity-ghostly: #{$eccgui-opacity-ghostly};
+    --#{$eccgui}-opacity-invisible: #{$eccgui-opacity-invisible};
+}

package/src/configuration/stories/customproperties.stories.tsx

@@ -0,0 +1,118 @@
+import React from "react";
+import { Meta, StoryFn } from "@storybook/react";
+
+import CssCustomProperties from "../../common/utils/CssCustomProperties";
+import {
+    Section,
+    SectionHeader,
+    Spacing,
+    Table,
+    TableBody,
+    TableCell,
+    TableContainer,
+    TableHead,
+    TableHeader,
+    TableRow,
+    TitleSubsection,
+} from "../../components";
+import { CLASSPREFIX as eccgui } from "../../index";
+
+const groups: { title: string; filterName: (name: string) => boolean }[] = [
+    {
+        title: "Typography",
+        filterName: (name) => name.startsWith(`--${eccgui}-size-typo`),
+    },
+    {
+        title: "Font weights and spacing",
+        filterName: (name) => name.startsWith(`--${eccgui}-font`),
+    },
+    {
+        title: "Whitespace",
+        filterName: (name) => name.startsWith(`--${eccgui}-size-block`) || name.startsWith(`--${eccgui}-size-inline`),
+    },
+    {
+        title: "Color aliases",
+        filterName: (name) => name.startsWith(`--${eccgui}-color`) && !name.startsWith(`--${eccgui}-color-palette`),
+    },
+    {
+        title: "Opacity",
+        filterName: (name) => name.startsWith(`--${eccgui}-opacity`),
+    },
+    {
+        title: "Palette colors",
+        filterName: (name) => name.startsWith(`--${eccgui}-color-palette`),
+    },
+];
+
+const CssCustomPropertiesOverview = () => {
+    return (
+        <>
+            {groups.map(({ title, filterName }) => {
+                const properties = new CssCustomProperties({
+                    selectorText: ":root",
+                    filterName,
+                    removeDashPrefix: false,
+                    returnObject: false,
+                }).customProperties() as string[][];
+
+                return (
+                    <React.Fragment key={title}>
+                        <Section>
+                            <SectionHeader>
+                                <TitleSubsection>{title}</TitleSubsection>
+                            </SectionHeader>
+                            <Spacing size="tiny" />
+                            <TableContainer>
+                                <Table columnWidths={["60%", "40%"]}>
+                                    <TableHead>
+                                        <TableRow>
+                                            <TableHeader>CSS custom property</TableHeader>
+                                            <TableHeader>Current value</TableHeader>
+                                        </TableRow>
+                                    </TableHead>
+                                    <TableBody>
+                                        {properties.map(([name, value]) => (
+                                            <TableRow key={name}>
+                                                <TableCell>
+                                                    <code>{name}</code>
+                                                </TableCell>
+                                                <TableCell>
+                                                    {name.startsWith(`--${eccgui}-color`) && (
+                                                        <span
+                                                            style={{
+                                                                display: "inline-block",
+                                                                width: `var(--${eccgui}-size-block-whitespace)`,
+                                                                height: `var(--${eccgui}-size-block-whitespace)`,
+                                                                backgroundColor: value,
+                                                                verticalAlign: "middle",
+                                                                marginRight: `var(--${eccgui}-size-inline-whitespace)`,
+                                                                border: "1px solid currentColor",
+                                                            }}
+                                                        />
+                                                    )}
+                                                    <code>{value}</code>
+                                                </TableCell>
+                                            </TableRow>
+                                        ))}
+                                    </TableBody>
+                                </Table>
+                            </TableContainer>
+                        </Section>
+                        <Spacing size="large" />
+                    </React.Fragment>
+                );
+            })}
+        </>
+    );
+};
+
+/**
+ * We mirror our SCSS configuration variables as CSS custom vars.
+ * This way they can be easily used for inline styles or in CSS modules without SCSS includes.
+ */
+export default {
+    title: "Configuration/CSS Custom Properties",
+    component: CssCustomPropertiesOverview,
+} as Meta<typeof CssCustomPropertiesOverview>;
+
+export const Default: StoryFn = () => <CssCustomPropertiesOverview />;

package/src/extensions/codemirror/CodeMirror.tsx

@@ -1,15 +1,14 @@
 import React, { useMemo, useRef } from "react";
 import { defaultKeymap, indentWithTab } from "@codemirror/commands";
 import { defaultHighlightStyle, foldKeymap } from "@codemirror/language";
-import { EditorState, Extension, Compartment } from "@codemirror/state";
+import { Compartment,EditorState, Extension } from "@codemirror/state";
 import { DOMEventHandlers, EditorView, KeyBinding, keymap, Rect, ViewUpdate } from "@codemirror/view";
 import { minimalSetup } from "codemirror";
 
+import { Markdown } from "../../cmem/markdown/Markdown";
 import { IntentTypes } from "../../common/Intent";
 import { markField } from "../../components/AutoSuggestion/extensions/markText";
 import { TestableComponent } from "../../components/interfaces";
-import { MarkdownToolbar } from "./toolbars/markdown.toolbar";
-import { Markdown } from "../../cmem/markdown/Markdown";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 //hooks
@@ -31,9 +30,10 @@ import {
     adaptedLineNumbers,
     adaptedLintGutter,
     adaptedPlaceholder,
-    compartment,
     adaptedSyntaxHighlighting,
+    compartment,
 } from "./tests/codemirrorTestHelper";
+import { MarkdownToolbar } from "./toolbars/markdown.toolbar";
 import { ExtensionCreator } from "./types";
 
 export interface CodeEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "translate" | "onChange" | "onKeyDown" | "onMouseDown" | "onScroll">, TestableComponent {
@@ -231,6 +231,10 @@ export const CodeEditor = ({
     currentView.current = view
     const currentReadOnly = React.useRef(readOnly)
     currentReadOnly.current = readOnly
+    const currentOnChange = React.useRef(onChange)
+    currentOnChange.current = onChange
+    const currentDisabled = React.useRef(disabled)
+    currentDisabled.current = disabled
     const [showPreview, setShowPreview] = React.useState<boolean>(false);
     // CodeMirror Compartments in order to allow for re-configuration after initialization
     const readOnlyCompartment = React.useRef<Compartment>(compartment())
@@ -319,11 +323,11 @@ export const CodeEditor = ({
             disabledCompartment.current.of(EditorView?.editable.of(!disabled)),
             AdaptedEditorViewDomEventHandlers(domEventHandlers) as Extension,
             EditorView?.updateListener.of((v: ViewUpdate) => {
-                if (disabled) return;
+                if (currentDisabled.current) return;
 
-                if (onChange && v.docChanged) {
+                if (currentOnChange.current && v.docChanged) {
                     // Only fire if the text has actually been changed
-                    onChange(v.state.doc.toString());
+                    currentOnChange.current(v.state.doc.toString());
                 }
 
                 if (onSelection)
@@ -377,7 +381,7 @@ export const CodeEditor = ({
             }
 
             if (disabled) {
-                view.dom.className += ` ${eccgui}-disabled`;
+                view.dom.classList.add(`${eccgui}-disabled`);
             }
 
             if (intent) {
@@ -432,7 +436,14 @@ export const CodeEditor = ({
     }, [tabIntentSize])
 
     React.useEffect(() => {
-        updateExtension(EditorView?.editable.of(!disabled), disabledCompartment.current)
+        updateExtension(EditorView?.editable.of(!disabled), disabledCompartment.current);
+        if (view?.dom) {
+            if (disabled) {
+                view.dom.classList.add(`${eccgui}-disabled`);
+            } else {
+                view.dom.classList.remove(`${eccgui}-disabled`);
+            }
+        }
     }, [disabled])
 
     React.useEffect(() => {