leksy-editor 2.6.0 → 3.0.0

package/style.css

@@ -1,721 +0,0 @@
-.leksy-editor-container *,
-*:before,
-*:after {
-    box-sizing: border-box;
-}
-
-.leksy-editor-container body,
-.leksy-editor-container p,
-.leksy-editor-container ul,
-.leksy-editor-container ol,
-.leksy-editor-container li {
-    margin: 0;
-    padding: 0;
-    color: black;
-    font-weight: normal;
-}
-
-.leksy-editor-container button {
-    appearance: auto;
-    text-rendering: auto;
-    color: unset;
-    letter-spacing: normal;
-    word-spacing: normal;
-    line-height: normal;
-    text-transform: none;
-    text-indent: 0px;
-    text-shadow: none;
-    display: inline-block;
-    text-align: center;
-    align-items: center;
-    cursor: pointer;
-    box-sizing: border-box;
-    background-color: unset;
-    padding-block: unset;
-    border-width: 0px;
-    border-style: outset;
-    border-color: unset;
-    border-image: initial;
-}
-
-.leksy-editor-container {
-    width: 100%;
-    min-height: 400px;
-    border: 1px solid black;
-    border-radius: 6px;
-    display: flex;
-    flex-direction: column;
-    position: relative;
-}
-
-.leksy-editor-container.fullscreen {
-    position: fixed;
-    top: 0;
-    left: 0;
-    height: 100vh;
-    background-color: white;
-    z-index: 1000;
-    border-radius: 0px;
-}
-
-.leksy-editor-toolbar {
-    padding: 6px;
-    border-bottom: 1px solid black;
-    background-color: ghostwhite;
-    flex: 0 1 auto;
-    display: flex;
-    flex-wrap: wrap;
-    border-radius: 6px 6px 0px 0px;
-    align-items: center;
-}
-
-.leksy-editor-toolbar-items {
-    outline: 1px solid gray;
-    display: flex;
-    border-radius: 4px;
-    margin: 2px;
-}
-
-.leksy-editor-toolbar-items span {
-    font-size: 14px;
-    white-space: nowrap;
-}
-
-.leksy-editor-toolbar-item {
-    margin: 1px;
-    padding: 6px 0;
-    height: 34px;
-    width: 34px;
-    background: transparent;
-    border-radius: 4px;
-    position: relative;
-    user-select: none;
-    vertical-align: top;
-    font-size: 1rem;
-    cursor: pointer;
-    outline: 0px;
-    text-align: center;
-    transition: .3s;
-}
-
-.leksy-editor-toolbar-item.active {
-    color: #4592ff;
-    fill: #4592ff;
-}
-
-.leksy-editor-toolbar-item.disabled {
-    cursor: not-allowed;
-    color: #bdbdbd;
-    fill: #bdbdbd;
-}
-
-.leksy-editor-toolbar-item svg {
-    width: 14px;
-    height: 14px;
-}
-
-.leksy-editor-toolbar-item.select {
-    padding: 0 8px;
-    width: unset;
-}
-
-.leksy-editor-toolbar-item.button-select {
-    border-radius: 4px 0 0 4px;
-    margin-right: 0;
-}
-
-.leksy-editor-toolbar-item.select.button-select {
-    padding: 0;
-    border-radius: 0 4px 4px 0;
-    margin-left: 0;
-    margin-right: 1px;
-}
-
-.leksy-editor-toolbar-item.select.button-select svg {
-    width: 18px;
-    height: 18px;
-}
-
-.leksy-editor-toolbar-item.reset-color {
-    width: unset;
-    padding: 4px 8px;
-}
-
-.leksy-editor-toolbar-item.color {
-    width: unset;
-    padding: 4px 8px;
-}
-
-.leksy-editor-toolbar-item.color input {
-    border: none;
-    width: 25px;
-    height: 25px;
-    background: none;
-}
-
-.leksy-editor-toolbar-item.color div {
-    display: inline;
-}
-
-.leksy-editor-toolbar-item:hover {
-    background-color: lightgrey;
-    border: pink;
-}
-
-.leksy-editor-toolbar-item:hover::after {
-    opacity: 1;
-    visibility: visible;
-}
-
-.leksy-editor-toolbar-item::after {
-    content: attr(data-title);
-    position: fixed;
-    top: var(--leksy-editor-top, 0);
-    left: var(--leksy-editor-left, 0);
-    opacity: 0;
-    visibility: hidden;
-    transition: opacity 0.3s, visibility 0.3s;
-    background-color: gray;
-    box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.2);
-    color: black;
-    padding: 5px 10px;
-    border-radius: 5px;
-    transform: translateX(-50%);
-    white-space: nowrap;
-    z-index: 1;
-    pointer-events: none;
-    font-size: 0.875rem;
-}
-
-.leksy-editor-toolbar-table {
-    display: grid;
-    grid-template-columns: repeat(10, 20px);
-    grid-template-rows: repeat(10, 20px);
-}
-
-.leksy-editor-toolbar-table .cell {
-    width: 16px;
-    height: 16px;
-    border: 1px solid gray;
-    background-color: lightgray;
-}
-
-.leksy-editor-toolbar-table .cell.selected {
-    background-color: #0c8;
-}
-
-.leksy-editor-placeholder {
-    user-select: none;
-    opacity: 0.5;
-    padding: 4px;
-    position: absolute;
-}
-
-.leksy-editor-resize-items {
-    margin-top: 4px;
-    width: 235px;
-}
-
-.leksy-editor-resize-item {
-    margin: 1px;
-    padding: 6px;
-    height: 34px;
-    background: transparent;
-    border-radius: 4px;
-    position: relative;
-    user-select: none;
-    vertical-align: top;
-    font-size: 1rem;
-    cursor: pointer;
-    outline: 0px;
-    text-align: center;
-}
-
-.leksy-editor-resize-item svg {
-    width: 15px;
-}
-
-.leksy-editor-resize-item:hover {
-    background-color: lightgrey;
-    border: pink;
-}
-
-.leksy-editor-resize-item:hover::after {
-    opacity: 1;
-    visibility: visible;
-}
-
-.leksy-editor-resize-item:not([data-title])::after,
-.leksy-editor-resize-item[data-title=""]::after {
-    display: none;
-}
-
-.leksy-editor-resize-item::after {
-    content: attr(data-title);
-    position: absolute;
-    opacity: 0;
-    visibility: hidden;
-    transition: opacity 0.3s, visibility 0.3s;
-    background-color: gray;
-    box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.2);
-    color: black;
-    padding: 5px 10px;
-    border-radius: 5px;
-    bottom: -90%;
-    left: 60%;
-    transform: translateX(-50%);
-    white-space: nowrap;
-    z-index: 1;
-    pointer-events: none;
-    font-size: 0.875rem;
-}
-
-.leksy-editor-dropdown-content {
-    display: none;
-    position: absolute;
-    min-width: 160px;
-    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15);
-    border-radius: 6px;
-    overflow: hidden;
-    padding: 4px;
-    z-index: 2000;
-    background-color: white;
-}
-
-.leksy-editor-dropdown-content>button {
-    display: block;
-    width: 100%;
-    margin: 0;
-    text-align: left;
-    padding: 8px 16px;
-    cursor: pointer;
-    white-space: nowrap;
-    transition: .3s;
-    border-radius: 6px;
-}
-
-.leksy-editor-dropdown-content>button svg {
-    width: 10px;
-    margin-right: 2px;
-}
-
-.leksy-editor-dropdown-content>button:hover {
-    background-color: #28a745;
-    color: #fff;
-}
-
-.leksy-editor-dropdown-content.gallery {
-    width: 266px;
-    height: 350px;
-    padding: 0;
-    overflow-y: auto;
-}
-
-.leksy-editor-dropdown-content.gallery img {
-    width: 100%;
-}
-
-.leksy-editor-dropdown-content.gallery input {
-    width: 100%;
-    line-height: 1.5rem;
-    padding: 2px 8px;
-    border: 1px solid #ccc;
-    border-radius: 6px;
-    transition: all 0.3s ease-in-out;
-    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
-    font-size: 14px;
-    position: sticky;
-    top: 0;
-}
-
-.leksy-editor-dropdown-content.gallery input:focus {
-    border-color: #4592ff;
-    box-shadow: 0px 4px 8px rgba(69, 146, 255, 0.3);
-    outline: none;
-}
-
-
-.leksy-editor-dropdown-content.category {
-    width: 300px;
-    height: 350px;
-    padding: 6px;
-    overflow-y: auto;
-    user-select: none;
-}
-
-.leksy-editor-dropdown-content.category div {
-    font-weight: bold;
-    margin-top: 8px;
-    margin-bottom: 4px;
-}
-
-.leksy-editor-dropdown-content.category span {
-    padding: 4px;
-    cursor: pointer;
-}
-
-.leksy-editor-dropdown-content.mention {
-    width: 250px;
-    height: 350px;
-    padding: 6px;
-    overflow-y: auto;
-    user-select: none;
-}
-
-.leksy-editor-dropdown-content.mention input {
-    width: 100%;
-    line-height: 1.5rem;
-    margin: 4px 0;
-}
-
-.leksy-editor-dropdown-content.mention button {
-    display: block;
-    width: 100%;
-    margin: 0;
-    text-align: left;
-    padding: 8px 16px;
-    cursor: pointer;
-    white-space: nowrap;
-}
-
-.leksy-editor-dropdown-content.mention button:hover {
-    background-color: green;
-}
-
-.leksy-editor-popover-content {
-    display: none;
-    position: absolute;
-    min-width: 160px;
-    box-shadow: 0 0 10px 0 grey;
-    border-radius: 6px;
-    padding: 4px;
-    z-index: 2000;
-    background-color: white;
-}
-
-.leksy-editor-popover-tabs {
-    display: flex;
-    background: #f1f1f1;
-    border-bottom: 1px solid #ccc;
-}
-
-button.leksy-editor-popover-tab {
-    padding: 8px 12px;
-    border: none;
-    background: transparent;
-    cursor: pointer;
-}
-
-button.leksy-editor-popover-tab.active {
-    border-bottom: 2px solid black;
-    font-weight: bold;
-}
-
-.leksy-editor-popover-tabs .leksy-editor-popover-tab:not(:last-child) {
-    border-right: 1px solid #ccc;
-}
-
-.leksy-editor-codeview {
-    flex: 1 1 auto;
-    padding: 4px;
-    background-color: #1f1f1f;
-    color: #74bed8;
-    border: 0;
-    outline: 0;
-    display: none;
-    resize: none;
-    height: 400px;
-}
-
-.leksy-editor-stepper {
-    height: 24px;
-    border-top: 1px solid black;
-    border-radius: 0 0 4px 4px;
-    background-color: ghostwhite;
-    padding: 2px 5px;
-    text-transform: uppercase;
-    display: flex;
-    justify-content: space-between;
-    font-size: 14px;
-    user-select: none;
-    /* Remove the last breadcrumb's slash */
-}
-
-.leksy-editor-stepper .breadcrumb {
-    list-style: none;
-    display: flex;
-    overflow: hidden;
-    justify-content: end;
-}
-
-.leksy-editor-stepper .breadcrumb li {
-    margin-left: 5px;
-}
-
-.leksy-editor-stepper .breadcrumb li::after {
-    content: ">";
-    margin-left: 5px;
-}
-
-.leksy-editor-stepper .breadcrumb li:last-child::after {
-    content: "";
-}
-
-.leksy-editor-modal {
-    position: fixed;
-    z-index: 100;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    overflow: auto;
-    background-color: rgba(0, 0, 0, 0.5);
-}
-
-.leksy-editor-modal.leksy-editor-draggable-modal {
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    background: inherit;
-    width: fit-content;
-    height: inherit;
-}
-
-.leksy-editor-modal-content {
-    margin: 10% auto;
-    border: 1px solid #898f9f;
-    max-width: 500px;
-    border-radius: 12px;
-}
-
-.leksy-editor-modal.leksy-editor-draggable-modal .leksy-editor-modal-content {
-    margin: unset;
-    width: fit-content;
-}
-
-.leksy-editor-modal-header {
-    padding: 1.25rem;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    background-color: #fff;
-    border-bottom: 1px solid #d4d5d8;
-    border-radius: 12px 12px 0 0;
-    overflow: hidden;
-}
-
-.leksy-editor-modal-body {
-    background-color: #fff;
-    padding: 1.5rem;
-    width: 100%;
-}
-
-.leksy-editor-modal-body .warning {
-    color: red;
-}
-
-.leksy-editor-modal-footer {
-    background-color: #f2f2f3;
-    padding: 1.25rem;
-    display: flex;
-    justify-content: flex-end;
-    gap: 12px;
-    border-radius: 0 0 12px 12px;
-    width: 100%;
-}
-
-.leksy-editor-modal input {
-    width: 100%;
-    font-size: 1rem;
-    padding: 10px 12px;
-    border: 1px solid #ccc;
-    border-radius: 6px;
-    outline: none;
-    transition: all 0.3s ease-in-out;
-    color: #333;
-}
-
-.leksy-editor-modal input:focus {
-    border-color: #4592ff;
-    background-color: #fff;
-}
-
-.leksy-editor-modal input::placeholder {
-    color: #bdbdbd;
-}
-
-.leksy-editor-modal input:hover {
-    border-color: #555;
-}
-
-.leksy-editor-modal button.submit {
-    height: 2rem;
-    padding: 0.75rem 1rem;
-    background-color: hsl(160, 100%, 35%);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: row;
-    text-align: center;
-    text-decoration: none;
-    cursor: pointer;
-    border: 1px solid hsl(160, 100%, 40%);
-    border-radius: 6px;
-    color: hsl(0, 0%, 100%);
-    white-space: nowrap;
-    gap: 0.5rem;
-    transition: 500ms;
-    font-size: 1rem;
-}
-
-/* Overlay styling */
-.leksy-editor-preview-modal-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba(0, 0, 0, 0.726);
-    /* Dark semi-transparent background */
-    display: block;
-    /* Hidden by default */
-    align-items: center;
-    justify-content: center;
-    z-index: 1000;
-}
-
-/* Modal content styling */
-.leksy-editor-preview-modal-content {
-    height: 100%;
-    padding: 20px;
-    border-radius: 8px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    position: relative;
-    text-align: center;
-}
-
-/* Close button styling */
-.leksy-editor-preview-modal-close {
-    position: absolute;
-    top: 10px;
-    right: 20px;
-    cursor: pointer;
-    color: white;
-    font-size: 20px;
-}
-
-.leksy-editor-preview-modal-close svg {
-    width: 28px;
-}
-
-/* Modal body styling */
-.leksy-editor-preview-modal-body {
-    display: flex;
-    height: 100%;
-    width: 100%;
-    align-items: center;
-    justify-content: center;
-}
-
-.leksy-editor-preview-modal-body img {
-    object-fit: contain;
-    max-width: 90%;
-    max-height: 90%;
-}
-
-.leksy-editor-spinner {
-    animation: leksy-editor-rotate 1s linear infinite;
-    margin-right: 8px;
-    vertical-align: middle;
-}
-
-.leksy-editor-spinner .leksy-editor-path {
-    stroke: white;
-    stroke-linecap: round;
-    animation: leksy-editor-dash 1.5s ease-in-out infinite;
-}
-
-.leksy-editor-upload-img-box {
-    height: 180px;
-    border: 2px dashed #d1d5db;
-    border-radius: 12px;
-    background: #f9fafb;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    transition: border-color 0.2s ease;
-}
-
-.leksy-editor-upload-img-box:hover {
-    border-color: gray;
-}
-
-.leksy-editor-upload-img-preview-box {
-    height: 180px;
-    border: 2px solid grey;
-    margin-bottom: 8px;
-    border-radius: 8px;
-}
-
-.leksy-editor-upload-img-preview {
-    width: 100%;
-    height: 100%;
-    border-radius: 8px;
-    object-fit: cover;
-    object-position: top;
-}
-
-.leksy-editor-find-and-replace-modal-tab-btn {
-    background: transparent;
-    border: none;
-    cursor: pointer;
-    font-size: 16px;
-    padding: 0;
-    color: var(--primary);
-}
-
-.leksy-editor-find-and-replace-modal-tab-btn.active {
-    font-weight: bold;
-    border-bottom: 2px solid black;
-}
-
-.leksy-editor-find-and-replace-modal-label {
-    padding-left: 4px;
-    margin-bottom: 10px;
-}
-
-.leksy-editor-find-and-replace-modal-count {
-    position: absolute;
-    right: 8px;
-    top: 50%;
-    transform: translateY(-50%);
-    font-size: 12px;
-    color: #585555;
-    pointer-events: none;
-    user-select: none;
-}
-
-@keyframes leksy-editor-rotate {
-    100% {
-        transform: rotate(360deg);
-    }
-}
-
-@keyframes leksy-editor-dash {
-    0% {
-        stroke-dasharray: 1, 150;
-        stroke-dashoffset: 0;
-    }
-
-    50% {
-        stroke-dasharray: 90, 150;
-        stroke-dashoffset: -35;
-    }
-
-    100% {
-        stroke-dasharray: 90, 150;
-        stroke-dashoffset: -124;
-    }
-}