@markopolo_ai_inc/markopolo-email-editor 1.0.3 → 1.0.4

package/package.json

@@ -1,11 +1,10 @@
 {
   "name": "@markopolo_ai_inc/markopolo-email-editor",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "private": false,
   "files": [
     "build",
     "public",
-    "src",
     "README.md"
   ],
   "dependencies": {

package/src/App.js

@@ -1,15 +0,0 @@
-import AppPage from "./pages/AppPage";
-import { createBrowserHistory } from "history";
-import { Router } from "react-router-dom";
-
-function App() {
-  const history = createBrowserHistory();
-
-  return (
-    <Router history={history}>
-      <AppPage />
-    </Router>
-  );
-}
-
-export default App;

package/src/components/EmailEditor/assets/App.css

@@ -1,339 +0,0 @@
-@import "./RichText.css";
-@import "./ImageBlock.css";
-@import "./Sidebar.css";
-@import "./Preview.css";
-@import "./Header.css";
-@import "./Columns.css";
-@import "./RightSettings.css";
-
-.email-editor * {
-  box-sizing: border-box;
-}
-
-/* Email editor design tokens aligned to Nabiq dark theme (globals.scss .dark). */
-:root {
-  color-scheme: dark;
-
-  /* Nabiq dark semantic tokens */
-  --ee-bg: #0a0a0a;
-  --ee-foreground: #fafafa;
-  --ee-primary: #d8fe91;
-  --ee-primary-foreground: #171717;
-  --ee-card: #171717;
-  --ee-muted: #262626;
-  --ee-muted-foreground: #a1a1a1;
-  --ee-border: #282828;
-  --ee-border-width: 1px;
-  --ee-radius: 0.5rem;
-  --ee-shadow:
-    0px 1px 3px 0px rgba(0, 0, 0, 0.25), 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
-  --ee-shadow-sm: 0px 1px 2px 0px rgba(0, 0, 0, 0.2);
-
-  --block-active-border: var(--ee-primary);
-  --block-hover-border: #b8e67a;
-  --block-empty-content-color: #374151;
-  --block-empty-content-background: rgba(216, 254, 145, 0.12);
-
-  --start-content-background: var(--ee-muted);
-  --start-content-font-color: var(--ee-muted-foreground);
-
-  --left-sidebar-background: var(--ee-muted);
-  --left-sidebar-tabs-background: var(--ee-card);
-  --left-sidebar-tab-color: var(--ee-foreground);
-  --left-sidebar-tab-hover-background: #404040;
-  --left-sidebar-tab-active-color: var(--ee-primary);
-  --rich-text-icon: rgba(216, 254, 145, 0.35);
-
-  --tools-font-color: var(--ee-primary-foreground);
-  --option-hover-color: rgba(216, 254, 145, 0.15);
-  --border-color: var(--ee-border);
-
-  --header-bg-color: var(--ee-card);
-  --header-icon-hover-color: var(--ee-foreground);
-  --header-icon-active-color: var(--ee-primary);
-  --header-icon-disabled-color: var(--ee-muted-foreground);
-  --header-drawer-close-bg-color: var(--ee-muted-foreground);
-  --header-drawer-close-color: var(--ee-foreground);
-  --header-drawer-close-hover-bg-color: #404040;
-  --header-drawer-head-bg-color: var(--ee-muted);
-
-  --right-settings-font-color: var(--ee-foreground);
-  --right-settings-title-font-color: var(--ee-muted-foreground);
-  --right-settings-block-title-font-color: var(--ee-foreground);
-  --right-settings-block-title-background-color: var(--ee-muted);
-
-  --column-background: var(--ee-muted);
-  --column-active-border: var(--ee-primary);
-  --column-un-active-border: var(--ee-border);
-  --column-divider-color: var(--ee-muted-foreground);
-
-  --align-style-item-active-color: var(--ee-primary);
-  --align-style-item-un-active-color: var(--ee-border);
-
-  --blue-500: var(--ee-primary);
-  --gray-400: var(--ee-muted-foreground);
-  --slate-100: var(--ee-muted);
-  --red-100: rgba(248, 113, 113, 0.2);
-  --red-500: #f87070;
-}
-
-img {
-  max-width: 100%;
-}
-
-.hover-visible {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-}
-
-.font-semibold {
-  font-weight: 600;
-}
-
-.width-full {
-  width: 100%;
-}
-
-.margin-y-30 {
-  margin-top: 30px;
-  margin-bottom: 30px;
-}
-
-.margin-top-6 {
-  margin-top: 6px;
-}
-
-.margin-top-12 {
-  margin-top: 12px;
-}
-
-.margin-top-18 {
-  margin-top: 18px;
-}
-
-.margin-top-32 {
-  margin-top: 32px;
-}
-
-.height-full {
-  height: 100%;
-}
-
-.relative {
-  position: relative;
-}
-
-.absolute {
-  position: absolute;
-}
-
-.select-none {
-  user-select: none;
-}
-
-.margin-auto {
-  margin: auto;
-}
-
-.text-left {
-  text-align: left;
-}
-
-.text-center {
-  text-align: center;
-}
-
-.text-right {
-  text-align: right;
-}
-
-.inline-block {
-  display: inline-block;
-}
-
-.flex {
-  display: flex;
-}
-
-.justify-center {
-  justify-content: center;
-}
-
-.justify-between {
-  justify-content: space-between;
-}
-
-.items-center {
-  align-items: center;
-}
-
-.cursor-default {
-  cursor: default;
-}
-
-.cursor-pointer {
-  cursor: pointer;
-}
-
-.cursor-grab {
-  cursor: grab;
-}
-
-.border-transparent {
-  border-color: transparent;
-}
-
-ol {
-  list-style: auto;
-  margin-left: 11px;
-}
-
-ul {
-  list-style: disc;
-  margin-left: 11px;
-}
-
-a:hover {
-  text-decoration: underline;
-}
-
-@keyframes shake {
-  0%,
-  100% {
-    transform: translateX(0) rotate(0);
-  }
-
-  5%,
-  30%,
-  50%,
-  70%,
-  90% {
-    transform: rotate(5deg);
-  }
-
-  20%,
-  40%,
-  60%,
-  80% {
-    transform: rotate(-5deg);
-  }
-}
-
-.ant-btn-primary {
-  background-color: var(--ee-primary);
-  border-color: var(--ee-primary);
-}
-
-.block-style_settings-collapse .ant-collapse-header {
-  font-weight: bold;
-  background-color: var(--start-content-background);
-  color: var(--start-content-font-color) !important;
-}
-
-.block-style_settings-collapse .ant-collapse-item {
-  margin-bottom: 12px;
-  padding: 0;
-}
-
-.block-style_settings-collapse .ant-collapse-content-box {
-  padding: 0 !important;
-}
-
-/* Dark theme for confirmation modals (Delete Column, Add Link, etc.) */
-.ee-modal-dark .ant-modal-content {
-  background-color: var(--ee-card) !important;
-  border: var(--ee-border-width) solid var(--ee-border);
-  border-radius: var(--ee-radius);
-  box-shadow: var(--ee-shadow);
-}
-.ee-modal-dark .ant-modal-header {
-  background-color: var(--ee-card) !important;
-  border-bottom: var(--ee-border-width) solid var(--ee-border);
-  border-radius: var(--ee-radius) var(--ee-radius) 0 0;
-}
-.ee-modal-dark .ant-modal-title {
-  color: var(--ee-foreground) !important;
-}
-.ee-modal-dark .ant-modal-body {
-  background-color: var(--ee-card) !important;
-  color: var(--ee-foreground);
-}
-.ee-modal-dark .ant-modal-body p,
-.ee-modal-dark .ant-modal-body .column-modal-context {
-  color: var(--ee-foreground);
-}
-.ee-modal-dark .ant-modal-close-x {
-  color: var(--ee-muted-foreground);
-}
-.ee-modal-dark .ant-modal-close-x:hover {
-  color: var(--ee-foreground);
-}
-.ee-modal-dark .ant-modal-footer {
-  background-color: var(--ee-card) !important;
-  border-top: var(--ee-border-width) solid var(--ee-border);
-}
-.ee-modal-dark .ant-modal-footer .ant-btn-default {
-  background-color: var(--ee-muted) !important;
-  border-color: var(--ee-border) !important;
-  color: var(--ee-foreground);
-}
-.ee-modal-dark .ant-modal-footer .ant-btn-default:hover {
-  border-color: var(--ee-primary);
-  color: var(--ee-primary);
-}
-.ee-modal-dark .ant-modal-footer .ant-btn-primary {
-  background-color: var(--ee-primary) !important;
-  border-color: var(--ee-primary) !important;
-  color: var(--ee-primary-foreground) !important;
-}
-.ee-modal-dark .ant-modal-footer .ant-btn-primary:hover {
-  background-color: #b8e67a !important;
-  border-color: #b8e67a !important;
-  color: var(--ee-primary-foreground) !important;
-}
-/* Input inside modal (e.g. Add Link) */
-.ee-modal-dark .ant-modal-body .ant-input,
-.ee-modal-dark .ant-modal-body .ant-input-affix-wrapper {
-  background-color: var(--ee-muted) !important;
-  border-color: var(--ee-border) !important;
-  color: var(--ee-foreground) !important;
-}
-.ee-modal-dark .ant-modal-body .ant-input:focus,
-.ee-modal-dark .ant-modal-body .ant-input-affix-wrapper-focused {
-  border-color: var(--ee-primary) !important;
-  box-shadow: 0 0 0 1px var(--ee-primary) !important;
-}
-.ee-modal-dark .ant-modal-body .ant-input-group-addon {
-  background-color: var(--ee-muted) !important;
-  border-color: var(--ee-border) !important;
-  color: var(--ee-foreground);
-}
-
-/* Export validation modal: severity headings and location text (dark theme) */
-.ee-modal-dark .export-validation-errors-heading {
-  color: var(--red-500);
-}
-.ee-modal-dark .export-validation-warnings-heading {
-  color: #fbbf24;
-}
-.ee-modal-dark .export-validation-info-heading {
-  color: #60a5fa;
-}
-.ee-modal-dark .export-validation-location {
-  color: var(--ee-muted-foreground);
-}
-
-/* Force InputNumber unit addon (px/%) dark – antd uses .ant-input-number-group-addon with #fafafa */
-.email-editor .right-settings .ant-input-number-group-addon,
-.email-editor
-  .right-settings
-  .ant-input-number-group-wrapper
-  .ant-input-number-group-addon {
-  background-color: var(--ee-muted) !important;
-  border-color: var(--ee-border) !important;
-  color: var(--ee-foreground) !important;
-}
-.email-editor .right-settings .ant-input-number-group-addon * {
-  color: var(--ee-foreground) !important;
-}

package/src/components/EmailEditor/assets/Columns.css

@@ -1,309 +0,0 @@
-.hover-visible::after {
-    visibility: visible;
-    content: '';
-    position: absolute;
-    outline: 2px solid var(--block-active-border);
-    right: 0px;
-    left: 0px;
-    top: 0%;
-    bottom: 0%;
-    opacity: 0;
-    z-index: 100;
-    outline-offset: -2px
-}
-
-.hover-visible:hover::after {
-    outline: 2px solid var(--block-hover-border);
-    opacity: 1;
-}
-
-.block-focus>.hover-visible::after {
-    outline: 2px solid var(--block-active-border);
-    opacity: 1;
-}
-
-.mobile-block-focus>.hover-visible::after {
-    margin-left: -50px;
-    margin-right: -50px;
-}
-
-.mobile-block-focus .block-move {
-    margin-right: -50px;
-}
-
-.mobile-block-focus .block-delete {
-    margin-right: -50px;
-}
-
-.block-content {
-    height: 100%;
-    display: flex;
-    margin: 0 auto;
-    flex-wrap: wrap;
-    max-width: 100%;
-}
-
-.block-focus .block-move {
-    visibility: visible;
-}
-
-
-.block-focus .block-delete {
-    visibility: visible;
-}
-
-.block-delete {
-    width: 30px;
-    height: 30px;
-    visibility: hidden;
-    right: 0;
-    bottom: -36px;
-    background-color: var(--block-active-border);
-    color: var(--tools-font-color);
-    text-align: center;
-    line-height: 30px;
-    z-index: 120;
-    cursor: pointer;
-}
-
-.block-move {
-    width: 30px;
-    height: 30px;
-    visibility: hidden;
-    right: -14px;
-    bottom: 50%;
-    background-color: var(--block-active-border);
-    color: var(--tools-font-color);
-    text-align: center;
-    line-height: 30px;
-    z-index: 120;
-    border-radius: 25px;
-    font-size: 16px;
-    transform: translateY(50%);
-    cursor: pointer;
-}
-
-.block-move-content {
-    height: 50%;
-    z-index: 100;
-}
-
-.block-move-content-top::after {
-    content: '';
-    position: absolute;
-    width: 100%;
-    bottom: 50%;
-    z-index: 104;
-    top: 0;
-}
-
-.block-move-content-bottom::after {
-    content: '';
-    position: absolute;
-    width: 100%;
-    top: 50%;
-    z-index: 104;
-    bottom: 0;
-}
-
-
-.block-move-top {
-    width: 100%;
-    top: -2px;
-    height: 4px;
-    background-color: var(--block-active-border);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    z-index: 103;
-    visibility: hidden;
-}
-
-.block-move-bottom {
-    width: 100%;
-    bottom: -2px;
-    height: 4px;
-    background-color: var(--block-active-border);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    z-index: 103;
-    visibility: hidden;
-}
-
-.block-tools-drag_here {
-    position: absolute;
-    padding: 6px 12px;
-    border-radius: 25px;
-    background-color: var(--block-active-border);
-    color: var(--tools-font-color);
-    text-align: center;
-    z-index: 98;
-}
-
-.block-empty-content {
-    display: flex;
-    color: var(--block-empty-content-color);
-    background-color: var(--block-empty-content-background);
-    outline: var(--block-empty-content-color) dashed 1px;
-    justify-content: center;
-    align-items: center;
-    text-align: center;
-    outline-offset: -1px;
-    height: 96px;
-    position: relative;
-    padding: 8px;
-}
-
-.block-empty-content-tools {
-    z-index: 110;
-    position: absolute;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    opacity: 0;
-    background-color: var(--block-empty-content-color);
-    color: var(--tools-font-color);
-    left: 0px;
-    right: 0px;
-    bottom: 0px;
-    top: 0px;
-}
-
-.start-to-add {
-    width: 100;
-    height: 50px;
-    background-color: var(--start-content-background);
-    color: var(--start-content-font-color);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin: auto;
-}
-
-.block-item {
-    position: relative;
-    flex: 1;
-}
-
-.block-item-tools {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-}
-
-.block-item-tools::after {
-    visibility: visible;
-    content: '';
-    position: absolute;
-    outline: 2px solid var(--block-active-border);
-    right: 0px;
-    left: 0px;
-    top: 0px;
-    bottom: 0px;
-    opacity: 0;
-    z-index: 100;
-    outline-offset: -1.5px;
-}
-
-.block-item-tools:hover::after {
-    opacity: 0.9;
-}
-
-.block-item-focus .block-item-tools::after {
-    outline: 2px solid var(--block-active-border);
-    opacity: 1;
-}
-
-.block-item-delete {
-    width: 30px;
-    height: 30px;
-    visibility: hidden;
-    right: 0;
-    bottom: -36px;
-    background-color: var(--block-active-border);
-    color: var(--tools-font-color);
-    text-align: center;
-    line-height: 30px;
-    z-index: 120;
-    cursor: pointer;
-}
-
-.block-item-move {
-    width: 30px;
-    height: 30px;
-    visibility: hidden;
-    right: -14px;
-    bottom: 50%;
-    background-color: var(--block-active-border);
-    color: var(--tools-font-color);
-    text-align: center;
-    line-height: 30px;
-    z-index: 120;
-    border-radius: 25px;
-    font-size: 16px;
-    transform: translateY(50%);
-    cursor: pointer;
-}
-
-.block-item-focus .block-item-move {
-    visibility: visible;
-}
-
-
-.block-item-focus .block-item-delete {
-    visibility: visible;
-}
-
-.text-block {
-    position: relative;
-    z-index: 101;
-    border: none;
-    flex: 1;
-}
-
-.text-block:focus-visible {
-    outline: unset;
-}
-
-.column-item {
-    width: 100%;
-    border-radius: var(--ee-radius);
-    height: 36px;
-    background-color: var(--column-background);
-    border-width: var(--ee-border-width);
-    border-style: solid;
-    cursor: pointer;
-    display: flex;
-    margin-top: 12px;
-}
-
-.column-item-active {
-    border-color: var(--column-active-border);
-}
-
-.column-item-un_active {
-    border-color: var(--column-un-active-border);
-
-}
-
-.column-item-un_active:hover {
-    border-color: var(--ee-primary);
-    box-shadow: 0px 3px 12px 0px rgba(216, 254, 145, 0.2);
-}
-
-.column-item-border-right {
-    border-right-width: var(--ee-border-width);
-    border-right-style: solid;
-}
-/* Inner column dividers: visible in dark mode (muted-foreground on muted bg) */
-.column-item .column-item-border-right {
-    border-right-color: var(--column-divider-color) !important;
-}
-
-.column-modal-context {
-    margin: 0 3px;
-    font-weight: 600;
-}