astro-tractstack 2.0.8 → 2.0.10

package/templates/src/components/compositor/nodes/tagElements/NodeA.tsx

@@ -1,4 +1,5 @@
 import { NodeAnchorComponent } from './NodeAnchorComponent';
 import type { NodeProps } from '@/types/nodeProps';
 
-export const NodeA = (props: NodeProps) => NodeAnchorComponent(props, 'a');
+export const NodeA = (props: NodeProps) =>
+  NodeAnchorComponent({ ...props, isSelectableText: false }, 'a');

package/templates/src/components/compositor/nodes/tagElements/NodeAnchorComponent.tsx

@@ -2,7 +2,6 @@ import { useEffect, useRef, type RefObject, type MouseEvent } from 'react';
 import { getCtx } from '@/stores/nodes';
 import { viewportKeyStore } from '@/stores/storykeep';
 import { RenderChildren } from '../RenderChildren';
-import { PlayButton } from '@/components/compositor/elements/PlayButton';
 import type { FlatNode } from '@/types/compositorTypes';
 import type { NodeProps } from '@/types/nodeProps';
 
@@ -13,11 +12,12 @@ export const NodeAnchorComponent = (props: NodeProps, tagName: string) => {
   const childNodeIDs = ctx.getChildNodeIDs(node?.parentId ?? '');
   const linkRef = useRef<HTMLAnchorElement | HTMLButtonElement>(null);
 
-  // Check if this is a video link
-  const isVideo = !!node.buttonPayload?.bunnyPayload;
-
-  // Get previous and next siblings for spacing logic
+  // Get current position and next sibling for spacing logic
   const currentIndex = childNodeIDs.indexOf(nodeId);
+
+  // Determine if a leading zero-width space is needed when this is the first child.
+  const needsLeadingSpace = currentIndex === 0;
+
   const nextNode =
     currentIndex < childNodeIDs.length - 1
       ? (ctx.allNodes.get().get(childNodeIDs[currentIndex + 1]) as FlatNode)
@@ -188,12 +188,15 @@ export const NodeAnchorComponent = (props: NodeProps, tagName: string) => {
   const isEditMode = [`text`].includes(ctx.toolModeValStore.get().value);
 
   // Create appropriate element based on tagName
+  let baseClasses = ctx.getNodeClasses(nodeId, viewportKeyStore.get().value);
+  baseClasses += ' outline outline-1 outline-dotted outline-gray-400/60';
   if (tagName === 'a') {
     return (
       <>
+        {needsLeadingSpace && '\u200B'}
         <a
           ref={linkRef as RefObject<HTMLAnchorElement>}
-          className={ctx.getNodeClasses(nodeId, viewportKeyStore.get().value)}
+          className={baseClasses}
           href={node.href}
           onClick={handleClick}
           onDoubleClick={handleDoubleClick}
@@ -205,12 +208,6 @@ export const NodeAnchorComponent = (props: NodeProps, tagName: string) => {
             children={ctx.getChildNodeIDs(nodeId)}
             nodeProps={props}
           />
-          {isVideo && (
-            <>
-              {` `}
-              <PlayButton />
-            </>
-          )}
         </a>
         {needsTrailingSpace && ' '}
       </>
@@ -218,9 +215,10 @@ export const NodeAnchorComponent = (props: NodeProps, tagName: string) => {
   } else {
     return (
       <>
+        {needsLeadingSpace && '\u200B'}
         <button
           ref={linkRef as RefObject<HTMLButtonElement>}
-          className={ctx.getNodeClasses(nodeId, viewportKeyStore.get().value)}
+          className={baseClasses}
           onClick={handleClick}
           onDoubleClick={handleDoubleClick}
           data-editable-button="true"
@@ -234,12 +232,6 @@ export const NodeAnchorComponent = (props: NodeProps, tagName: string) => {
             children={ctx.getChildNodeIDs(nodeId)}
             nodeProps={props}
           />
-          {isVideo && (
-            <>
-              {` `}
-              <PlayButton />
-            </>
-          )}
         </button>
         {needsTrailingSpace && ' '}
       </>

package/templates/src/components/compositor/nodes/tagElements/NodeBasicTag.tsx

@@ -9,8 +9,15 @@ import {
   useState,
   createElement,
 } from 'react';
+import { useStore } from '@nanostores/react';
+import XMarkIcon from '@heroicons/react/24/outline/XMarkIcon';
+import PaintBrushIcon from '@heroicons/react/24/outline/PaintBrushIcon';
 import { getCtx } from '@/stores/nodes';
-import { viewportKeyStore, isEditingStore } from '@/stores/storykeep';
+import {
+  viewportKeyStore,
+  isEditingStore,
+  settingsPanelStore,
+} from '@/stores/storykeep';
 import TabIndicator from './TabIndicator';
 import { RenderChildren } from '../RenderChildren';
 import {
@@ -32,13 +39,30 @@ export const NodeBasicTag = (props: NodeTagProps) => {
   const ctx = getCtx(props);
   const Tag = ctx.showGuids.get() ? `div` : props.tagName;
 
-  // Core state
+  if (props.tagName === 'span') {
+    const node = ctx.allNodes.get().get(props.nodeId);
+    const children = ctx.parentNodes.get().get(props.nodeId);
+
+    if (VERBOSE)
+      console.log(
+        '%c[NodeBasicTag] RENDERING SPAN',
+        'color: purple; font-weight: bold;',
+        {
+          nodeId: props.nodeId,
+          node: node ? cloneDeep(node) : 'NODE NOT FOUND',
+          childrenIds: children ? cloneDeep(children) : 'CHILDREN NOT FOUND',
+        }
+      );
+  }
+
   const [editState, setEditState] = useState<EditState>('viewing');
   const [showTabIndicator, setShowTabIndicator] = useState(false);
   const elementRef = useRef<HTMLElement | null>(null);
   const originalContentRef = useRef<string>('');
   const cursorPositionRef = useRef<{ node: Node; offset: number } | null>(null);
 
+  const { value: toolModeVal } = useStore(ctx.toolModeValStore);
+
   // Get node data
   const node = ctx.allNodes.get().get(nodeId) as FlatNode;
   const children = ctx.getChildNodeIDs(nodeId);
@@ -228,8 +252,83 @@ export const NodeBasicTag = (props: NodeTagProps) => {
     }
   }, [editState]);
 
-  // For formatting nodes and interactive elements like <a> and <button>
-  if (['em', 'strong', 'a', 'button'].includes(props.tagName)) {
+  // For formatting nodes <em> and <strong> and <span>
+  if (['em', 'strong', 'span'].includes(props.tagName)) {
+    const isEditorActive = toolModeVal === 'styles';
+    const handleStyleClick = (e: MouseEvent<HTMLButtonElement>) => {
+      e.preventDefault();
+      e.stopPropagation();
+      settingsPanelStore.set({
+        action: 'style-element',
+        nodeId: nodeId,
+        expanded: true,
+      });
+    };
+    const handleUnwrapClick = (e: MouseEvent<HTMLButtonElement>) => {
+      e.preventDefault();
+      e.stopPropagation();
+      ctx.unwrapNode(nodeId);
+    };
+
+    let baseClasses = ctx.getNodeClasses(nodeId, viewportKeyStore.get().value);
+    baseClasses += ' outline outline-1 outline-dotted outline-gray-400/60';
+
+    return createElement(
+      Tag,
+      {
+        className: baseClasses,
+        onClick: (e: MouseEvent) => {
+          if (isEditableMode) {
+            ctx.setClickedNodeId(nodeId);
+          } else {
+            ctx.setClickedNodeId(nodeId);
+            e.stopPropagation();
+          }
+        },
+        'data-node-id': nodeId,
+        tabIndex: isEditableMode ? -1 : undefined,
+        style: {
+          position: isEditorActive ? 'relative' : undefined,
+          outlineOffset: '1px',
+        },
+      },
+      [
+        <RenderChildren key="children" children={children} nodeProps={props} />,
+        isEditorActive && (
+          <span
+            key="chip"
+            className="absolute z-10 flex select-none gap-x-1"
+            data-attr="exclude"
+            style={{ top: '-0.9rem', left: '0' }}
+          >
+            {props.tagName === 'span' && (
+              <button
+                type="button"
+                onClick={handleStyleClick}
+                className="flex h-4 w-4 items-center justify-center rounded-full bg-blue-100/90 text-blue-700 shadow-sm hover:bg-blue-300/50 focus:outline-none"
+                aria-label="Style selection"
+                data-attr="exclude"
+              >
+                <PaintBrushIcon className="h-3 w-3" data-attr="exclude" />
+              </button>
+            )}
+            <button
+              type="button"
+              onClick={handleUnwrapClick}
+              className="flex h-4 w-4 items-center justify-center rounded-full bg-gray-100/90 text-gray-700 shadow-sm hover:bg-gray-300/50 focus:outline-none"
+              aria-label="Remove formatting"
+              data-attr="exclude"
+            >
+              <XMarkIcon className="h-3.5 w-3.5" data-attr="exclude" />
+            </button>
+          </span>
+        ),
+      ]
+    );
+  }
+
+  // For interactive elements like <a> and <button>
+  if (['a', 'button'].includes(props.tagName)) {
     return createElement(
       Tag,
       {
@@ -267,7 +366,11 @@ export const NodeBasicTag = (props: NodeTagProps) => {
   const saveAndExit = () => {
     if (editState !== 'editing') return;
 
-    const currentContent = elementRef.current?.innerHTML || '';
+    // Use an in-memory element to safely parse and strip UI chrome from the content.
+    const tempDiv = document.createElement('div');
+    tempDiv.innerHTML = elementRef.current?.innerHTML || '';
+    tempDiv.querySelectorAll('[data-attr="exclude"]');
+    const currentContent = tempDiv.innerHTML;
 
     if (currentContent !== originalContentRef.current) {
       try {
@@ -553,6 +656,10 @@ export const NodeBasicTag = (props: NodeTagProps) => {
   const clickTimeoutRef = useRef<NodeJS.Timeout | null>(null);
 
   const handleClick = (e: MouseEvent) => {
+    if (toolModeVal === 'styles') {
+      console.log(`skipping handleClick on purpose`);
+      return;
+    }
     if (
       isEditableMode &&
       (e.target instanceof HTMLAnchorElement ||
@@ -674,7 +781,14 @@ export const NodeBasicTag = (props: NodeTagProps) => {
           'data-node-id': nodeId,
           'data-placeholder': isPlaceholder,
         },
-        <RenderChildren children={children} nodeProps={props} />
+        <RenderChildren
+          children={children}
+          nodeProps={{
+            ...props,
+            nodeId: nodeId,
+            isSelectableText: props.isSelectableText,
+          }}
+        />
       )}
       {showTabIndicator && editState === 'editing' && (
         <TabIndicator onTab={createNextParagraph} parentNodeId={nodeId} />

package/templates/src/components/compositor/nodes/tagElements/NodeButton.tsx

@@ -2,4 +2,4 @@ import { NodeAnchorComponent } from './NodeAnchorComponent';
 import type { NodeProps } from '@/types/nodeProps';
 
 export const NodeButton = (props: NodeProps) =>
-  NodeAnchorComponent(props, 'button');
+  NodeAnchorComponent({ ...props, isSelectableText: false }, 'button');

package/templates/src/components/compositor/nodes/tagElements/NodeText.tsx

@@ -1,18 +1,88 @@
 import { getCtx } from '@/stores/nodes';
 import type { FlatNode } from '@/types/compositorTypes';
 import type { NodeProps } from '@/types/nodeProps';
+import { useStore } from '@nanostores/react';
+import { selectionStore } from '@/stores/selection';
 
 export const NodeText = (props: NodeProps) => {
-  const node = getCtx(props).allNodes.get().get(props.nodeId) as FlatNode;
-  const parentNode = node.parentId
-    ? (getCtx(props).allNodes.get().get(node.parentId) as FlatNode)
-    : null;
-  const isLink = parentNode && [`a`, `button`].includes(parentNode.tagName);
+  const ctx = getCtx(props);
+  const node = ctx.allNodes.get().get(props.nodeId) as FlatNode;
+  const { value: toolModeVal } = useStore(ctx.toolModeValStore);
+  const selection = useStore(selectionStore);
+
   if (!node) return <>ERROR MISSING NODE</>;
 
-  // Only add a space if we're not empty and don't end with a space
   const text = node.copy || '';
-  const needsSpace = text && !text.endsWith(' ') && !isLink;
 
-  return <>{text.trim() === '' ? '\u00A0' : text + (needsSpace ? ' ' : '')}</>;
+  if (toolModeVal === 'styles' && props.isSelectableText) {
+    let charOffset = 0;
+    const wordSpans = text.split(/(\s+)/).map((segment, index) => {
+      const startOffset = charOffset;
+      const endOffset = charOffset + segment.length;
+      charOffset = endOffset;
+
+      if (segment.trim() === '') {
+        return (
+          <span
+            key={index}
+            data-parent-text-node-id={props.nodeId}
+            data-start-char-offset={startOffset}
+            data-end-char-offset={endOffset}
+          >
+            {segment}
+          </span>
+        );
+      }
+
+      let isInSelection = false;
+      const currentNodeId = props.nodeId;
+
+      // Show outline if EITHER dragging OR selection is finalized and active
+      // AND the selection is within this current text node.
+      if (
+        (selection.isDragging || selection.isActive) &&
+        selection.startNodeId &&
+        selection.endNodeId &&
+        selection.startNodeId === currentNodeId && // Selection must start in this node
+        selection.endNodeId === currentNodeId // Selection must end in this node
+      ) {
+        const { startCharOffset, endCharOffset } = selection;
+
+        let selStartChar = startCharOffset;
+        let selEndChar = endCharOffset;
+
+        // Handle backward selection within this single node
+        if (startCharOffset > endCharOffset) {
+          selStartChar = endCharOffset;
+          selEndChar = startCharOffset;
+        }
+
+        // Check if current span falls within the character range
+        if (endOffset > selStartChar && startOffset < selEndChar) {
+          isInSelection = true;
+        }
+      }
+
+      return (
+        <span
+          key={index}
+          className={
+            isInSelection ? 'outline-dotted outline-2 outline-blue-600' : ''
+          }
+          data-parent-text-node-id={props.nodeId}
+          data-start-char-offset={startOffset}
+          data-end-char-offset={endOffset}
+        >
+          {segment}
+        </span>
+      );
+    });
+
+    return <>{wordSpans}</>;
+  }
+
+  if (text.trim() === '') {
+    return <>{'\u00A0'}</>;
+  }
+  return <>{text}</>;
 };

package/templates/src/components/edit/SettingsPanel.tsx

@@ -27,7 +27,7 @@ const SettingsPanel = ({ config, availableCodeHooks }: SettingsPanelProps) => {
 
   return (
     <div
-      className="bg-mydarkgrey min-w-xs flex h-full max-w-sm flex-col rounded-xl bg-opacity-20 p-0.5 backdrop-blur-sm"
+      className="bg-mydarkgrey flex h-full min-w-96 max-w-sm flex-col rounded-xl bg-opacity-20 p-0.5 backdrop-blur-sm"
       style={
         {
           animation: window.matchMedia(

package/templates/src/components/edit/ToolMode.tsx

@@ -6,9 +6,13 @@ import TrashIcon from '@heroicons/react/24/outline/TrashIcon';
 import ArrowsUpDownIcon from '@heroicons/react/24/outline/ArrowsUpDownIcon';
 import PlusIcon from '@heroicons/react/24/outline/PlusIcon';
 import BugAntIcon from '@heroicons/react/24/outline/BugAntIcon';
+import LinkIcon from '@heroicons/react/24/solid/LinkIcon';
+import XMarkIcon from '@heroicons/react/24/solid/XMarkIcon';
 import { settingsPanelStore } from '@/stores/storykeep';
 import { getCtx } from '@/stores/nodes';
+import { classNames } from '@/utils/helpers';
 import type { ToolModeVal } from '@/types/compositorTypes';
+import { selectionStore, resetSelectionStore } from '@/stores/selection';
 
 const storykeepToolModes = [
   {
@@ -50,12 +54,15 @@ interface StoryKeepToolModeProps {
 const StoryKeepToolMode = ({ isContext }: StoryKeepToolModeProps) => {
   const ctx = getCtx();
   const { value: toolModeVal } = useStore(ctx.toolModeValStore);
+  const $selection = useStore(selectionStore);
   const showGuids = useStore(ctx.showGuids);
   const navRef = useRef<HTMLElement>(null);
 
   const hasTitle = useStore(ctx.hasTitle);
   const hasPanes = useStore(ctx.hasPanes);
 
+  const isSelectionActive = $selection.isActive;
+
   const className =
     'w-8 h-8 py-1 rounded-xl bg-white text-myblue hover:bg-mygreen/20 hover:text-black hover:rotate-3 cursor-pointer transition-all';
   const classNameActive = 'w-8 h-8 py-1.5 rounded-md bg-myblue text-white';
@@ -77,11 +84,27 @@ const StoryKeepToolMode = ({ isContext }: StoryKeepToolModeProps) => {
     ctx.notifyNode('root');
   };
 
+  const handleStyleClick = () => {
+    selectionStore.setKey('pendingAction', 'style');
+  };
+
+  const handleLinkClick = () => {
+    selectionStore.setKey('pendingAction', 'link');
+  };
+
+  const handleCancelClick = () => {
+    resetSelectionStore();
+  };
+
   useEffect(() => {
     const handleEscapeKey = (event: KeyboardEvent) => {
       if (event.key === 'Escape') {
-        ctx.toolModeValStore.set({ value: 'text' });
-        ctx.notifyNode('root');
+        if (selectionStore.get().isActive) {
+          resetSelectionStore();
+        } else {
+          ctx.toolModeValStore.set({ value: 'text' });
+          ctx.notifyNode('root');
+        }
       }
     };
 
@@ -101,31 +124,79 @@ const StoryKeepToolMode = ({ isContext }: StoryKeepToolModeProps) => {
       <nav
         id="mainNav"
         ref={navRef}
-        className="z-102 bg-mywhite md:bg-mywhite/70 fixed bottom-0 left-0 right-0 p-1.5 md:bottom-2 md:right-auto md:h-auto md:w-auto md:rounded-r-xl md:border md:border-black/5 md:p-2 md:shadow-lg md:backdrop-blur-sm"
+        className={classNames(
+          'z-102 bg-mywhite md:bg-mywhite/70 fixed bottom-0 left-0 right-0 p-1.5 md:bottom-2 md:right-auto md:h-auto md:w-auto md:rounded-r-xl md:border md:border-black/5 md:p-2 md:shadow-lg md:backdrop-blur-sm',
+          isSelectionActive ? `outline-dashed outline-4 outline-red-600` : ``
+        )}
       >
-        <div className="flex flex-wrap justify-around gap-4 py-0.5 md:flex-nowrap md:justify-start md:gap-4 md:p-0">
-          <div className="text-mydarkgrey text-center text-sm font-bold">
-            mode:
-            <div className="font-action text-myblue pt-1.5 text-center text-xs">
-              {currentToolMode.title}
+        {!isSelectionActive && (
+          <div className="flex flex-wrap justify-around gap-4 py-0.5 md:flex-nowrap md:justify-start md:gap-4 md:p-0">
+            <div className="text-mydarkgrey text-center text-sm font-bold">
+              mode:
+              <div className="font-action text-myblue pt-1.5 text-center text-xs">
+                {currentToolMode.title}
+              </div>
+            </div>
+            {storykeepToolModes.map(({ key, Icon, description }) => (
+              <div title={description} key={key}>
+                {key === toolModeVal ? (
+                  <Icon className={classNameActive} />
+                ) : (
+                  <Icon
+                    className={className}
+                    onClick={() => handleClick(key)}
+                  />
+                )}
+              </div>
+            ))}
+            <div title="Toggle debug node ids" key="debug">
+              <BugAntIcon
+                className={showGuids ? classNameDebugActive : className}
+                onClick={handleDebugToggle}
+              />
             </div>
           </div>
-          {storykeepToolModes.map(({ key, Icon, description }) => (
-            <div title={description} key={key}>
-              {key === toolModeVal ? (
-                <Icon className={classNameActive} />
-              ) : (
-                <Icon className={className} onClick={() => handleClick(key)} />
-              )}
+        )}
+
+        {isSelectionActive && (
+          <div className="flex items-center justify-around gap-x-2 py-0.5 md:justify-start md:p-0">
+            <div className="text-mydarkgrey text-center text-sm font-bold">
+              mode:
+              <div className="font-action text-myblue pt-1.5 text-center text-xs">
+                Action Pending
+              </div>
+            </div>
+            <div className="flex gap-x-1 rounded-lg bg-gray-100 p-2 shadow-inner">
+              <button
+                type="button"
+                onClick={handleStyleClick}
+                className="flex h-8 w-8 items-center justify-center rounded-lg bg-blue-100 text-blue-700 shadow-sm hover:bg-blue-200"
+                aria-label="Style selection"
+                title="Add custom styles"
+              >
+                <PaintBrushIcon className="h-5 w-5" />
+              </button>
+              <button
+                type="button"
+                onClick={handleLinkClick}
+                className="flex h-8 w-8 items-center justify-center rounded-lg bg-blue-100 text-blue-700 shadow-sm hover:bg-blue-200"
+                aria-label="Create link"
+                title="Hyperlink"
+              >
+                <LinkIcon className="h-5 w-5" />
+              </button>
+              <button
+                type="button"
+                onClick={handleCancelClick}
+                className="flex h-8 w-8 items-center justify-center rounded-lg bg-gray-200 text-gray-700 shadow-sm hover:bg-gray-300"
+                aria-label="Cancel selection"
+                title="Cancel Selection"
+              >
+                <XMarkIcon className="h-5 w-5" />
+              </button>
             </div>
-          ))}
-          <div title="Toggle debug node ids" key="debug">
-            <BugAntIcon
-              className={showGuids ? classNameDebugActive : className}
-              onClick={handleDebugToggle}
-            />
           </div>
-        </div>
+        )}
       </nav>
     </>
   );

package/templates/src/components/edit/pane/AddPanePanel_break.tsx

@@ -2,7 +2,8 @@
 import { useEffect, useState, useMemo } from 'react';
 import { Combobox } from '@ark-ui/react';
 import { createListCollection } from '@ark-ui/react/collection';
-import { ChevronUpDownIcon, CheckIcon } from '@heroicons/react/20/solid';
+import ChevronUpDownIcon from '@heroicons/react/20/solid/ChevronUpDownIcon';
+import CheckIcon from '@heroicons/react/20/solid/CheckIcon';
 import { NodesContext } from '@/stores/nodes';
 import {
   PanesPreviewGenerator,

package/templates/src/components/edit/pane/AddPanePanel_codehook.tsx

@@ -3,7 +3,8 @@ import { useStore } from '@nanostores/react';
 import { ulid } from 'ulid';
 import { Combobox } from '@ark-ui/react';
 import { createListCollection } from '@ark-ui/react/collection';
-import { ChevronUpDownIcon, CheckIcon } from '@heroicons/react/20/solid';
+import ChevronUpDownIcon from '@heroicons/react/20/solid/ChevronUpDownIcon';
+import CheckIcon from '@heroicons/react/20/solid/CheckIcon';
 import { codehookMapStore, fullContentMapStore } from '@/stores/storykeep';
 import { getCtx } from '@/stores/nodes';
 import { findUniqueSlug } from '@/utils/helpers';

package/templates/src/components/edit/pane/AddPanePanel_reuse.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect, useMemo } from 'react';
 import { Combobox } from '@ark-ui/react';
 import { createListCollection } from '@ark-ui/react/collection';
-import { ChevronUpDownIcon } from '@heroicons/react/20/solid';
+import ChevronUpDownIcon from '@heroicons/react/20/solid/ChevronUpDownIcon';
 import { fullContentMapStore } from '@/stores/storykeep';
 import { NodesContext, getCtx } from '@/stores/nodes';
 import {

package/templates/src/components/edit/pane/PageGen_preview.tsx

@@ -2,7 +2,8 @@ import { useState, useEffect } from 'react';
 import { Select } from '@ark-ui/react/select';
 import { Portal } from '@ark-ui/react/portal';
 import { createListCollection } from '@ark-ui/react/collection';
-import { ChevronUpDownIcon, CheckIcon } from '@heroicons/react/20/solid';
+import ChevronUpDownIcon from '@heroicons/react/20/solid/ChevronUpDownIcon';
+import CheckIcon from '@heroicons/react/20/solid/CheckIcon';
 import { NodesContext } from '@/stores/nodes';
 import { createEmptyStorykeep } from '@/utils/compositor/nodesHelper';
 import { brandColourStore, preferredThemeStore } from '@/stores/storykeep';

package/templates/src/components/edit/panels/StyleElementPanel_update.tsx

@@ -56,7 +56,8 @@ const StyleElementUpdatePanel = ({
   // Initialize values from current node state
   useEffect(() => {
     const hasOverride = node.overrideClasses?.mobile?.[className] !== undefined;
-    setIsOverridden(hasOverride);
+    const isSpan = node.tagName === 'span';
+    setIsOverridden(isSpan || hasOverride);
 
     styleElementInfoStore.set({
       markdownParentId: parentNode.id,
@@ -278,12 +279,15 @@ const StyleElementUpdatePanel = ({
           type="checkbox"
           checked={isOverridden}
           onChange={(e) => handleToggleOverride(e.target.checked)}
-          className="border-mydarkgrey text-myorange focus:ring-myorange h-4 w-4 rounded"
+          disabled={node.tagName === 'span'}
+          className="border-mydarkgrey text-myorange focus:ring-myorange h-4 w-4 rounded disabled:opacity-50"
         />
         <span className="text-mydarkgrey text-sm">
-          {isOverridden
-            ? 'Override mode. Styling this element only.'
-            : 'You are in quick styles mode. Click to override this element.'}
+          {node.tagName === 'span'
+            ? 'Styling this selection (Override mode).'
+            : isOverridden
+              ? 'Override mode. Styling this element only.'
+              : 'You are in quick styles mode. Click to override this element.'}
         </span>
       </div>