@webiny/lexical-editor 5.44.1-beta.1 → 5.45.0-beta.0

package/components/Toolbar/Toolbar.css

@@ -1,643 +0,0 @@
-.floating-toolbar {
-  display: flex;
-  padding: 4px;
-  vertical-align: middle;
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 30;
-  opacity: 0;
-  background-color: #fff;
-  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
-  border-radius: 8px;
-  transition: opacity 0.5s;
-  height: 35px;
-  will-change: transform;
-}
-
-.floating-toolbar button.popup-item {
-  border: 0;
-  display: flex;
-  background: none;
-  border-radius: 10px;
-  padding: 8px;
-  cursor: pointer;
-  vertical-align: middle;
-}
-
-.floating-toolbar button.popup-item:disabled {
-  cursor: not-allowed;
-}
-
-.floating-toolbar button.popup-item.spaced {
-  margin-right: 2px;
-}
-
-.floating-toolbar button.popup-item i.format {
-  background-size: contain;
-  display: inline-block;
-  height: 18px;
-  width: 18px;
-  margin-top: 2px;
-  vertical-align: -0.25em;
-  display: flex;
-  opacity: 0.6;
-}
-
-.floating-toolbar button.popup-item:disabled i.format {
-  opacity: 0.2;
-}
-
-.floating-toolbar button.popup-item.active {
-  background-color: rgba(223, 232, 250, 0.3);
-}
-
-.floating-toolbar button.popup-item.active i {
-  opacity: 1;
-}
-
-.floating-toolbar .popup-item:hover:not([disabled]) {
-  background-color: #eee;
-}
-
-.floating-toolbar select.popup-item {
-  border: 0;
-  display: flex;
-  background: none;
-  border-radius: 10px;
-  padding: 8px;
-  vertical-align: middle;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  width: 70px;
-  font-size: 14px;
-  color: #777;
-  text-overflow: ellipsis;
-}
-
-.floating-toolbar select.code-language {
-  text-transform: capitalize;
-  width: 130px;
-}
-
-.floating-toolbar .popup-item .text {
-  display: flex;
-  line-height: 20px;
-  width: 200px;
-  vertical-align: middle;
-  font-size: 14px;
-  color: #777;
-  text-overflow: ellipsis;
-  width: 70px;
-  overflow: hidden;
-  height: 20px;
-  text-align: left;
-}
-
-.floating-toolbar .popup-item .icon {
-  display: flex;
-  width: 20px;
-  height: 20px;
-  user-select: none;
-  margin-right: 8px;
-  line-height: 16px;
-  background-size: contain;
-}
-
-.floating-toolbar i.chevron-down {
-  margin-top: 3px;
-  width: 16px;
-  height: 16px;
-  display: flex;
-  user-select: none;
-}
-
-.floating-toolbar i.chevron-down.inside {
-  width: 16px;
-  height: 16px;
-  display: flex;
-  margin-left: -25px;
-  margin-top: 11px;
-  margin-right: 10px;
-  pointer-events: none;
-}
-
-.floating-toolbar .divider {
-  width: 1px;
-  background-color: #eee;
-  margin: 0 4px;
-}
-
-i.bold {
-  background-image: url("../../images/icons/type-bold.svg");
-}
-
-i.italic {
-  background-image: url("../../images/icons/type-italic.svg");
-}
-
-i.code {
-  background-image: url("../../images/icons/code.svg");
-}
-
-i.underline {
-  background-image: url("../../images/icons/type-underline.svg");
-}
-
-i.strikethrough {
-  background-image: url("../../images/icons/type-strikethrough.svg");
-}
-
-i.link {
-  background-image: url("../../images/icons/link.svg");
-}
-
-i.quote {
-  background-image: url("../../images/icons/chat-square-quote.svg");
-}
-
-.icon.left-align,
-i.left-align {
-  background-image: url("../../images/icons/text-left.svg");
-}
-
-i.center-align {
-  background-image: url("../../images/icons/text-center.svg");
-}
-
-i.right-align {
-  background-image: url("../../images/icons/text-right.svg");
-}
-
-i.indent {
-  background-image: url("../../images/icons/indent.svg");
-}
-
-i.outdent {
-  background-image: url("../../images/icons/outdent.svg");
-}
-
-i.justify-align {
-  background-image: url("../../images/icons/justify.svg");
-}
-
-i.chevron-down {
-  background-color: transparent;
-  background-size: contain;
-  display: inline-block;
-  height: 8px;
-  width: 8px;
-  background-image: url("../../images/icons/chevron-down.svg");
-}
-
-i.insert-image,
-.icon.insert-image {
-  background-color: transparent;
-  background-size: contain;
-  display: inline-block;
-  height: 8px;
-  width: 8px;
-  background-image: url("../../images/icons/insert-image.svg");
-}
-
-.icon.bullet-list,
-.icon.bullet {
-  background-image: url("../../images/icons/list-ul.svg");
-}
-
-.icon.numbered-list,
-.icon.number {
-  background-image: url("../../images/icons/list-ol.svg");
-}
-
-i.font-color,
-.icon.font-color {
-  background-image: url("../../images/icons/font-color.svg");
-}
-
-.link-editor .button.active,
-.toolbar .button.active {
-  background-color: rgb(223, 232, 250);
-}
-
-.floating-toolbar button.toolbar-item {
-  border: 0;
-  display: flex;
-  background: none;
-  border-radius: 10px;
-  padding: 8px;
-  cursor: pointer;
-  vertical-align: middle;
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.floating-toolbar button.toolbar-item:disabled {
-  cursor: not-allowed;
-}
-
-.floating-toolbar button.toolbar-item.spaced {
-  margin-right: 2px;
-}
-
-.floating-toolbar button.toolbar-item i.format {
-  background-size: contain;
-  display: inline-block;
-  height: 18px;
-  width: 18px;
-  vertical-align: -0.25em;
-  display: flex;
-  opacity: 0.6;
-}
-
-.floating-toolbar button.toolbar-item:disabled .icon,
-.floating-toolbar button.toolbar-item:disabled .text,
-.floating-toolbar button.toolbar-item:disabled i.format,
-.floating-toolbar button.toolbar-item:disabled .chevron-down {
-  opacity: 0.2;
-}
-
-.floating-toolbar button.toolbar-item.active {
-  background-color: rgba(223, 232, 250, 0.3);
-}
-
-.floating-toolbar button.toolbar-item.active i {
-  opacity: 1;
-}
-
-.floating-toolbar .toolbar-item:hover:not([disabled]) {
-  background-color: #eee;
-}
-
-.floating-toolbar .toolbar-item.font-family .text {
-  display: block;
-  max-width: 40px;
-}
-
-.floating-toolbar .code-language {
-  width: 150px;
-}
-
-.floating-toolbar .toolbar-item .text {
-  display: flex;
-  line-height: 20px;
-  vertical-align: middle;
-  font-size: 14px;
-  color: #777;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  height: 20px;
-  text-align: left;
-  padding-right: 10px;
-}
-
-.floating-toolbar .toolbar-item .icon {
-  display: flex;
-  width: 20px;
-  height: 20px;
-  user-select: none;
-  margin-right: 8px;
-  line-height: 16px;
-  background-size: contain;
-}
-
-.floating-toolbar i.chevron-down {
-  margin-top: 3px;
-  width: 16px;
-  height: 16px;
-  display: flex;
-  user-select: none;
-}
-
-.floating-toolbar i.chevron-down.inside {
-  width: 16px;
-  height: 16px;
-  display: flex;
-  margin-left: -25px;
-  margin-top: 11px;
-  margin-right: 10px;
-  pointer-events: none;
-}
-
-.toolbar .divider {
-  width: 1px;
-  background-color: #eee;
-  margin: 0 4px;
-}
-
-.lexical-dropdown-container {
-  position: absolute;
-  bottom: -5px;
-  left: 0;
-}
-
-.lexical-dropdown {
-  z-index: 10;
-  display: block;
-  position: fixed;
-  box-shadow: 0 12px 28px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1),
-    inset 0 0 0 1px rgba(255, 255, 255, 0.5);
-  border-radius: 8px;
-  min-height: 40px;
-  background-color: #fff;
-  max-height: 250px;
-  overflow: hidden;
-  overflow-y: auto;
-}
-
-.lexical-dropdown.no-scroll {
-  max-height: inherit;
-  overflow: auto;
-  overflow-y: auto;
-}
-
-.lexical-dropdown .item {
-  margin: 0 8px 0 8px;
-  padding: 8px;
-  color: #050505;
-  cursor: pointer;
-  line-height: 16px;
-  font-size: 15px;
-  display: flex;
-  align-content: center;
-  flex-direction: row;
-  flex-shrink: 0;
-  justify-content: space-between;
-  background-color: #fff;
-  border-radius: 8px;
-  border: 0;
-  max-width: 250px;
-  min-width: 100px;
-}
-
-.lexical-dropdown .item.fontsize-item,
-.lexical-dropdown .item.fontsize-item .text {
-  min-width: unset;
-}
-
-.lexical-dropdown .item .active {
-  display: flex;
-  width: 20px;
-  height: 20px;
-  background-size: contain;
-}
-
-.lexical-dropdown .item:first-child {
-  margin-top: 8px;
-}
-
-.lexical-dropdown .item:last-child {
-  margin-bottom: 8px;
-}
-
-.lexical-dropdown .item:hover {
-  background-color: #eee;
-}
-
-.lexical-dropdown .item .text {
-  display: flex;
-  line-height: 20px;
-  flex-grow: 1;
-  min-width: 150px;
-}
-
-.lexical-dropdown .item .icon {
-  display: flex;
-  width: 20px;
-  height: 20px;
-  user-select: none;
-  margin-right: 12px;
-  line-height: 16px;
-  background-size: contain;
-  background-position: center;
-  background-repeat: no-repeat;
-}
-
-.lexical-dropdown .divider {
-  width: auto;
-  background-color: #eee;
-  margin: 4px 8px;
-  height: 1px;
-}
-
-@media screen and (max-width: 1100px) {
-  .dropdown-button-text {
-    display: none !important;
-  }
-  .font-size .dropdown-button-text {
-    display: flex !important;
-  }
-  .code-language .dropdown-button-text {
-    display: flex !important;
-  }
-}
-
-button.item i {
-  opacity: 0.6;
-}
-
-button.item.dropdown-item-active {
-  background-color: rgba(223, 232, 250, 0.3);
-}
-
-button.item.dropdown-item-active i {
-  opacity: 1;
-}
-
-.editor-shell span.editor-image {
-  cursor: default;
-  display: inline-block;
-  position: relative;
-  user-select: none;
-}
-
-.editor-shell .editor-image img {
-  max-width: 100%;
-  cursor: default;
-}
-
-.editor-shell .editor-image img.focused {
-  outline: 2px solid rgb(60, 132, 244);
-  user-select: none;
-}
-
-.editor-shell .editor-image img.focused.draggable {
-  cursor: grab;
-}
-
-.editor-shell .editor-image img.focused.draggable:active {
-  cursor: grabbing;
-}
-
-.editor-shell .editor-image .image-caption-container .tree-view-output {
-  margin: 0;
-  border-radius: 0;
-}
-
-.editor-shell .editor-image .image-caption-container {
-  display: block;
-  position: absolute;
-  bottom: 4px;
-  left: 0;
-  right: 0;
-  padding: 0;
-  margin: 0;
-  border-top: 1px solid #fff;
-  background-color: #ffffffe6;
-  min-width: 100px;
-  color: #000;
-  overflow: hidden;
-}
-
-.editor-shell .editor-image .image-caption-button {
-  display: block;
-  position: absolute;
-  bottom: 20px;
-  left: 0;
-  right: 0;
-  width: 30%;
-  padding: 10px;
-  margin: 0 auto;
-  border: 1px solid rgba(255, 255, 255, 0.3);
-  border-radius: 5px;
-  background-color: #00000080;
-  min-width: 100px;
-  color: #fff;
-  cursor: pointer;
-  user-select: none;
-}
-
-.editor-shell .editor-image .image-caption-button:hover {
-  background-color: #3c84f480;
-}
-
-.editor-shell .editor-image .image-resizer {
-  display: block;
-  width: 7px;
-  height: 7px;
-  position: absolute;
-  background-color: #3c84f4;
-  border: 1px solid #fff;
-}
-
-.editor-shell .editor-image .image-resizer.image-resizer-n {
-  top: -6px;
-  left: 48%;
-  cursor: n-resize;
-}
-
-.editor-shell .editor-image .image-resizer.image-resizer-ne {
-  top: -6px;
-  right: -6px;
-  cursor: ne-resize;
-}
-
-.editor-shell .editor-image .image-resizer.image-resizer-e {
-  bottom: 48%;
-  right: -6px;
-  cursor: e-resize;
-}
-
-.editor-shell .editor-image .image-resizer.image-resizer-se {
-  bottom: -2px;
-  right: -6px;
-  cursor: nwse-resize;
-}
-
-.editor-shell .editor-image .image-resizer.image-resizer-s {
-  bottom: -2px;
-  left: 48%;
-  cursor: s-resize;
-}
-
-.editor-shell .editor-image .image-resizer.image-resizer-sw {
-  bottom: -2px;
-  left: -6px;
-  cursor: sw-resize;
-}
-
-.editor-shell .editor-image .image-resizer.image-resizer-w {
-  bottom: 48%;
-  left: -6px;
-  cursor: w-resize;
-}
-
-.editor-shell .editor-image .image-resizer.image-resizer-nw {
-  top: -6px;
-  left: -6px;
-  cursor: nw-resize;
-}
-
-.editor-shell span.inline-editor-image {
-  cursor: default;
-  display: inline-block;
-  position: relative;
-  z-index: 1;
-}
-
-.editor-shell .inline-editor-image img {
-  max-width: 100%;
-  cursor: default;
-}
-
-.editor-shell .inline-editor-image img.focused {
-  outline: 2px solid rgb(60, 132, 244);
-}
-
-.editor-shell .inline-editor-image img.focused.draggable {
-  cursor: grab;
-}
-
-.editor-shell .inline-editor-image img.focused.draggable:active {
-  cursor: grabbing;
-}
-
-.editor-shell .inline-editor-image .image-caption-container .tree-view-output {
-  margin: 0;
-  border-radius: 0;
-}
-
-.editor-shell .inline-editor-image.position-full {
-  margin: 1em 0;
-}
-
-.editor-shell .inline-editor-image.position-left {
-  float: left;
-  width: 50%;
-  margin: 1em 1em 0 0;
-}
-
-.editor-shell .inline-editor-image.position-right {
-  float: right;
-  width: 50%;
-  margin: 1em 0 0 1em;
-}
-
-.editor-shell .inline-editor-image .image-edit-button {
-  display: block;
-  position: absolute;
-  top: 12px;
-  right: 12px;
-  padding: 6px 8px;
-  margin: 0 auto;
-  border: 1px solid rgba(255, 255, 255, 0.3);
-  border-radius: 5px;
-  background-color: #00000080;
-  min-width: 60px;
-  color: #fff;
-  cursor: pointer;
-  user-select: none;
-}
-
-.editor-shell .inline-editor-image .image-edit-button:hover {
-  background-color: #3c84f480;
-}
-
-.editor-shell .inline-editor-image .image-caption-container {
-  display: block;
-  background-color: #f4f4f4;
-  min-width: 100%;
-  color: #000;
-  overflow: hidden;
-}

package/components/Toolbar/Toolbar.d.ts

@@ -1,11 +0,0 @@
-import React from "react";
-import "./Toolbar.css";
-declare global {
-    interface Document {
-        floatingToolbar: boolean;
-    }
-}
-export interface ToolbarProps {
-    anchorElem?: HTMLElement;
-}
-export declare const Toolbar: ({ anchorElem }: ToolbarProps) => React.ReactPortal | null;