@syncfusion/ej2-fabric-theme 34.2.8 → 35.1.37

package/styles/headless-editor/_layout.scss

@@ -0,0 +1,672 @@
+@use 'variables' as *;
+@include export-module('headless-editor-layout') {
+
+  /* ======== Main Editor ======== */
+  .e-headless-editor {
+    font-family: $he-font-family;
+    font-size: $he-font-size;
+    font-weight: $he-font-weight;
+
+    /* Use a unitless value so the line-height scales proportionally with each element's font size. */
+    line-height: 1.428571;
+    overflow: auto;
+    overflow-x: hidden;
+    outline: none;
+    > :first-child {
+      outline: none;
+      position: relative;
+      word-wrap: break-word;
+      white-space: pre-wrap;
+      white-space: break-spaces;
+      tab-size: 4;
+      padding: 0 10px;
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    p {
+      margin: $he-heading-margin;
+      padding: $he-heading-padding;
+    }
+    h1 {
+      font-size: $he-h1-font-size;
+      font-weight: $he-h1-font-weight;
+      line-height: $he-h1-line-height;
+    }
+
+    h2 {
+      font-size: $he-h2-font-size;
+      font-weight: $he-h2-font-weight;
+      line-height: $he-h2-line-height;
+    }
+
+    h3 {
+      font-size: $he-h3-font-size;
+      font-weight: $he-h3-font-weight;
+      line-height: $he-h3-line-height;
+    }
+
+    h4 {
+      font-size: $he-h4-font-size;
+      font-weight: $he-h4-font-weight;
+      line-height: $he-h4-line-height;
+    }
+
+    h5 {
+      font-size: $he-h5-font-size;
+      font-weight: $he-h5-font-weight;
+      line-height: $he-h5-line-height;
+    }
+
+    h6 {
+      font-size: $he-h6-font-size;
+      line-height: $he-h6-font-weight;
+      line-height: $he-h6-line-height;
+    }
+
+    blockquote {
+      font-size: inherit;
+      border-left-width: $he-blockquote-left-width;
+      border-left-style: solid;
+      padding: 0 0 0 $he-blockquote-text-padding;
+      margin: $he-blockquote-margin;
+    }
+
+    /* Task List */
+    ul[data-type = 'taskList'] {
+      list-style: none;
+      margin-left: 0;
+      padding: 0;
+      > li {
+        flex-direction: row;
+        align-items: flex-start;
+        display: flex;
+        > label {
+          padding-top: $he-checklist-padding-top;
+          padding-right: $he-checklist-padding-right;
+          position: relative;
+          input {
+            width: $he-checkbox-width;
+            height: $he-checkbox-height;
+          }
+        }
+
+        div {
+          flex: 1 1 auto;
+          min-width: 0;
+        }
+      }
+    }
+
+    /* Callout */
+    [data-type = 'callout'] {
+      display: flex;
+      align-items: center;
+      gap: $he-callout-icon-gap;
+      padding: $he-callout-padding;
+      border-radius: 6px;
+      margin: 8px 0;
+
+      .e-callout-icon {
+        flex: 0 0 auto;
+        cursor: default;
+        user-select: none;
+        padding: unset;
+        border: none;
+        background-color: transparent;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        align-self: flex-start;
+        width: $he-callout-icon-width;
+        height: $he-callout-icon-height;
+        padding-top: $he-callout-icon-padding-top;
+
+        svg {
+          width: $he-callout-icon-width;
+          height: $he-callout-icon-height;
+        }
+      }
+
+      .e-callout-content {
+        flex: 1;
+        min-width: 0;
+
+        > *:first-child {
+          margin-top: 0;
+        }
+
+        > *:last-child {
+          margin-bottom: 0;
+        }
+      }
+    }
+
+    /* collapsible */
+    [data-type = 'collapsible'] {
+      margin: 8px 0;
+      .e-collapsible-body-content {
+        padding-left: calc($he-collapsible-header-gap + $he-toggle-icon-width);
+      }
+    }
+    [data-type = 'collapsible'][data-collapsed = 'true'] .e-collapsible-body-content {
+      display: none;
+    }
+    [data-role = 'collapsible-header'] {
+      display: flex;
+      align-items: center;
+      gap: $he-collapsible-header-gap;
+
+      /* Collapsible toggle button */
+      .e-toggle-btn {
+        flex: 0 0 auto;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: $he-toggle-icon-width;
+        height: $he-toggle-icon-height;
+        padding: 0;
+        border-radius: 4px;
+        font: inherit;
+        cursor: pointer;
+        user-select: none;
+
+        svg {
+          width: $he-toggle-icon-width;
+          height: $he-toggle-icon-height;
+        }
+      }
+
+      .e-collapsible-header-content {
+        flex: 1;
+        > * {
+          margin: 0;
+        }
+      }
+    }
+
+    /* List Block Styles */
+    ul,
+    ol {
+      margin: unset;
+      padding-left: 21px;
+    }
+
+    li {
+      margin: unset;
+      position: relative;
+    }
+
+    /* Prosemirror dynamic styles */
+    li.ProseMirror-selectednode {
+      outline: none;
+    }
+
+    li.ProseMirror-selectednode::after {
+      content: '';
+      position: absolute;
+      left: -32px;
+      right: -2px;
+      top: -2px;
+      bottom: -2px;
+      pointer-events: none;
+    }
+
+    a {
+      text-decoration: none;
+      user-select: auto;
+      cursor: pointer;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+
+    /* Inline code */
+    code {
+      &:not(pre *) {
+        font-size: inherit;
+        font-weight: inherit;
+        line-height: inherit;
+        padding: $he-inline-code-padding;
+        border-radius: $he-inline-code-border-radius;
+        white-space: pre-wrap;
+      }
+    }
+
+    /* Code Block Styles */
+    .e-code-block {
+      border-radius: $he-code-block-border-radius;
+      overflow: hidden;
+      margin: 8px 0;
+
+      pre {
+        min-height: 100px;
+        max-height: 200px;
+        margin: $he-code-block-pre-margin;
+        padding: $he-code-block-padding;
+        border: $he-code-block-pre-border;
+        border-radius: $he-code-block-pre-radius;
+        overflow-x: auto;
+        font-size: $he-font-size;
+        line-height: $he-line-height;
+        white-space: break-spaces;
+        word-break: inherit;
+        word-wrap: break-word;
+        font-family: $he-code-block-font-family;
+      }
+    }
+
+    /* ======== Divider Blocks Level styles ======== */
+    hr[contenteditable = 'false'] {
+      margin-block: $he-divider-margin-block;
+      &:hover,
+      &.ProseMirror-selectednode {
+        margin-left: 7px;
+      }
+    }
+
+    /* Table Styles */
+    .tableWrapper {
+      overflow-x: auto;
+      margin: 12px 0;
+      table {
+        border-collapse: collapse;
+        table-layout: fixed;
+        width: 100%;
+        overflow: hidden;
+
+        td,
+        th {
+          min-width: 60px;
+          box-sizing: border-box;
+          vertical-align: top;
+          position: relative;
+          text-align: left;
+        }
+
+        th {
+          height: $he-table-heading-height;
+          padding: $he-table-heading-padding;
+          font-weight: $he-table-heading-font-weight;
+          font-size: $he-table-heading-font-size;
+          line-height: $he-table-heading-line-height;
+          text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
+          &:focus,
+          &:focus-within {
+            text-overflow: clip;
+          }
+        }
+
+        td {
+          height: $he-table-col-height;
+          padding: $he-table-col-padding;
+          font-weight: $he-table-col-font-weight;
+          font-size: $he-table-col-font-size;
+          line-height: $he-table-col-line-height;
+        }
+
+        td:not([data-colwidth]):not(.column-resize-dragging),
+        th:not([data-colwidth]):not(.column-resize-dragging) {
+          min-width: var(--default-cell-min-width);
+        }
+
+        .column-resize-handle {
+          position: absolute;
+          right: 0;
+          top: 0;
+          bottom: 0;
+          width: 2px;
+          z-index: 20;
+          pointer-events: none;
+        }
+      }
+    }
+
+    .resize-cursor {
+      cursor: ew-resize;
+      cursor: col-resize;
+    }
+
+    /* ======== Placeholder Styles ======== */
+    .e-placeholder-is-empty::before {
+      content: attr(data-placeholder);
+      float: left;
+      height: 0;
+      pointer-events: none;
+    }
+
+    /* Block Image Styles */
+    /* Resizable NodeView */
+    .e-resizable-wrapper {
+      &.ProseMirror-selectednode {
+        outline: none;
+      }
+      position: relative;
+      display: inline-block;
+      overflow: visible;
+      line-height: 0; /* Prevents extra space around inline elements */
+
+      /* Inline image text wrapping */
+      &.e-img-wrap-left {
+        float: left;
+        margin-right: 16px;
+        margin-bottom: 8px;
+      }
+
+      &.e-img-wrap-right {
+        float: right;
+        margin-left: 16px;
+        margin-bottom: 8px;
+      }
+
+      /* Inline image alignment */
+      &.e-img-align-left {
+        display: block;
+        width: fit-content;
+        margin-left: 0;
+        margin-right: 0;
+      }
+
+      &.e-img-align-center {
+        display: block;
+        width: fit-content;
+        margin-left: auto;
+        margin-right: auto;
+      }
+
+      &.e-img-align-right {
+        display: block;
+        width: fit-content;
+        margin-left: auto;
+        margin-right: 0;
+      }
+
+      .e-resizable-handle {
+        position: absolute;
+        z-index: 9999;
+        width: 10px;
+        height: 10px;
+        background: $he-resizable-handle-bg-color;
+        border: 1px solid $he-resizable-handle-border-color;
+        border-radius: 1px;
+        box-sizing: border-box;
+        user-select: none;
+        touch-action: none;
+
+        /* Ensure handles are never clipped by parent overflow */
+        pointer-events: auto;
+
+        /* Corner handles: positioned at -5px so handle center aligns with image corner */
+        &[data-resize-handle = 'top-left'] {
+          top: -5px;
+          left: -5px;
+          cursor: nwse-resize;
+        }
+
+        &[data-resize-handle = 'top-right'] {
+          top: -5px;
+          right: -5px;
+          cursor: nesw-resize;
+        }
+
+        &[data-resize-handle = 'bottom-left'] {
+          bottom: -5px;
+          left: -5px;
+          cursor: nesw-resize;
+        }
+
+        &[data-resize-handle = 'bottom-right'] {
+          right: -5px;
+          bottom: -5px;
+          cursor: nwse-resize;
+        }
+
+        /* Edge handles: centered on each edge */
+        &[data-resize-handle = 'top'],
+        &[data-resize-handle = 'bottom'] {
+          left: 50%;
+          transform: translateX(-50%);
+        }
+
+        &[data-resize-handle = 'top'] {
+          top: -5px;
+          cursor: ns-resize;
+        }
+
+        &[data-resize-handle = 'bottom'] {
+          bottom: -5px;
+          cursor: ns-resize;
+        }
+
+        &[data-resize-handle = 'left'],
+        &[data-resize-handle = 'right'] {
+          top: 50%;
+          transform: translateY(-50%);
+        }
+
+        &[data-resize-handle = 'left'] {
+          left: -5px;
+          cursor: ew-resize;
+        }
+
+        &[data-resize-handle = 'right'] {
+          right: -5px;
+          cursor: ew-resize;
+        }
+      }
+    }
+    .e-resizable-wrapper:has(> img.e-img-inline),
+    img.e-img-inline {
+      &.e-img-align-left,
+      &.e-img-align-center,
+      &.e-img-align-right {
+        display: block;
+        width: fit-content;
+      }
+    }
+
+    /* Shared image element styles */
+    .e-img-core-element {
+      max-width: 100%;
+      height: auto;
+      display: inline-block;
+      vertical-align: middle;
+    }
+
+    /* Figure Styles */
+    .e-img-figure {
+      display: block;
+      width: fit-content;
+      max-width: 100%;
+      margin: 14px 0;
+      clear: both;
+      text-align: left;
+      &:has(> .e-resizable-wrapper.e-img-align-center),
+      &:has(> img.e-img-align-center) {
+        margin-left: auto;
+        margin-right: auto;
+      }
+      &:has(> .e-resizable-wrapper.e-img-align-right),
+      &:has(> img.e-img-align-right) {
+        margin-left: auto;
+        margin-right: 0;
+      }
+
+      /* Custom UI Slot style (For upload status, badges, etc) */
+      .e-img-ui-slot {
+        position: absolute;
+        z-index: 5;
+        pointer-events: none;
+
+        &.e-img-ui-top-left {
+          top: 8px;
+          left: 8px;
+        }
+        &.e-img-ui-top-center {
+          top: 8px;
+          left: 50%;
+          transform: translateX(-50%);
+        }
+        &.e-img-ui-top-right {
+          top: 8px;
+          right: 8px;
+        }
+        &.e-img-ui-center-left {
+          top: 50%;
+          left: 8px;
+          transform: translateY(-50%);
+        }
+        &.e-img-ui-center {
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+        }
+        &.e-img-ui-center-right {
+          top: 50%;
+          right: 8px;
+          transform: translateY(-50%);
+        }
+        &.e-img-ui-bottom-left {
+          bottom: 8px;
+          left: 8px;
+        }
+        &.e-img-ui-bottom-center {
+          bottom: 8px;
+          left: 50%;
+          transform: translateX(-50%);
+        }
+        &.e-img-ui-bottom-right {
+          bottom: 8px;
+          right: 8px;
+        }
+      }
+
+      /* Image-owned wrapping for current block and captioned markup. */
+      &:has(> img.e-img-wrap-left),
+      &:has(> .e-resizable-wrapper.e-img-wrap-left) {
+        float: left;
+        width: fit-content;
+        max-width: 100%;
+        clear: none;
+        margin-right: 20px;
+        margin-bottom: 12px;
+      }
+      &:has(> img.e-img-wrap-right),
+      &:has(> .e-resizable-wrapper.e-img-wrap-right) {
+        float: right;
+        width: auto;
+        width: fit-content;
+        max-width: 100%;
+        clear: none;
+        margin-left: 20px;
+        margin-bottom: 12px;
+      }
+
+      > figcaption.e-img-figcaption {
+        display: block;
+        width: auto;
+        clear: none;
+        text-align: center;
+      }
+
+      > .e-resizable-wrapper {
+        .e-img-wrap-left,
+        .e-img-wrap-right {
+          float: none;
+          margin-left: 0;
+          margin-right: 0;
+        }
+      }
+    }
+
+    /* Base inline image styles */
+    .e-img-inline {
+      display: inline-block;
+      vertical-align: middle;
+      margin: 0 4px;
+      max-width: 100%;
+      height: auto;
+
+      &.e-img-wrap-left {
+        float: left;
+        margin-right: 16px;
+        margin-bottom: 8px;
+      }
+
+      &.e-img-wrap-right {
+        float: right;
+        margin-left: 16px;
+        margin-bottom: 8px;
+      }
+    }
+
+    /* Protect against generic img rules */
+    img.ProseMirror-separator {
+      display: inline;
+      border: none;
+      margin: 0;
+      padding: 0;
+      width: 1px;
+      height: 1px;
+      overflow: hidden;
+      vertical-align: middle;
+    }
+
+    .ProseMirror [draggable][contenteditable = 'false'] {
+      user-select: text;
+    }
+
+    /* Clear floated image layouts */
+    .ProseMirror-content::after {
+      content: '';
+      display: table;
+      clear: both;
+    }
+
+    /* ======== RTL Styles ======== */
+    &.e-rtl {
+
+      /* Task List */
+      ul[data-type = 'taskList'] {
+        padding-left: unset;
+        padding-right: unset;
+        li {
+          > label {
+            padding-right: unset;
+            padding-left: $he-checklist-padding-right;
+          }
+        }
+      }
+
+      blockquote {
+        border-left-width: unset;
+        border-left-style: unset;
+        border-right-width: $he-blockquote-left-width;
+        border-right-style: solid;
+        padding: 0 $he-blockquote-text-padding 0 0;
+      }
+
+      /* collapsible */
+      [data-type = 'collapsible'] {
+        .e-collapsible-body-content {
+          padding-left: unset;
+          padding-right: calc($he-collapsible-header-gap + $he-toggle-icon-width);
+        }
+      }
+
+      /* List Block Styles */
+      ul,
+      ol {
+        padding-left: unset;
+        padding-right: 21px;
+      }
+    }
+  }
+}