@ebl-vue/editor-full 1.0.12 → 1.1.1

package/src/plugins/imageResizeCrop/index.css

@@ -0,0 +1,234 @@
+.cdx-image-tool-tune--floatLeft .cdx-block,
+.cdx-image-tool-tune--center .cdx-block,
+.cdx-image-tool-tune--floatRight .cdx-block,
+.cdx-image-tool-tune--floatLeft .image-tool__image,
+.cdx-image-tool-tune--center .image-tool__image,
+.cdx-image-tool-tune--floatRight .image-tool__image,
+.cdx-image-tool-tune--floatLeft .cdx-block,
+.cdx-image-tool-tune--center .cdx-block,
+.cdx-image-tool-tune--floatRight .cdx-block {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+:root {
+  --primary: #2492F5;
+  --primary-content: #E9F4FE;
+}
+
+.cdx-settings-button--active {
+  background: var(--primary-content);
+  color: var(--primary);
+}
+
+.cdx-settings-button:hover {
+  background: var(--primary-content);
+}
+
+.cdx-image-tool-tune--center {
+  display: flex;
+  justify-content: center;
+}
+
+@media all and (min-width: 470px) {
+  .codex-editor:not(.read-only)
+    .cdx-image-tool-tune--floatLeft.ce-block__content,
+  .codex-editor:not(.read-only)
+    .cdx-image-tool-tune--floatRight.ce-block__content {
+    min-height: 20px;
+  }
+
+  .cdx-image-tool-tune--floatLeft.ce-block__content .image-tool__image,
+  .cdx-image-tool-tune--floatRight.ce-block__content .image-tool__image {
+    margin-top: 40px;
+  }
+  .cdx-image-tool-tune--floatLeft.ce-block__content .image-tool__image {
+    margin-left: 20px;
+  }
+  .cdx-image-tool-tune--floatRight.ce-block__content .image-tool__image {
+    margin-right: 20px;
+  }
+
+  .cdx-image-tool-tune--floatLeft.ce-block__content .cdx-input,
+  .cdx-image-tool-tune--floatRight.ce-block__content .cdx-input {
+    width: calc(100% - 20px);
+  }
+  .cdx-image-tool-tune--floatLeft.ce-block__content .cdx-input {
+    margin-left: 20px;
+  }
+  .cdx-image-tool-tune--floatRight.ce-block__content .cdx-input {
+    margin-right: 20px;
+  }
+
+  .cdx-image-tool-tune--floatLeft .cdx-block {
+    float: left;
+    margin-right: 10px;
+  }
+
+  .cdx-image-tool-tune--floatRight .cdx-block {
+    float: right;
+    margin-left: 10px;
+  }
+
+  .cdx-image-tool-tune--sizeSmall .cdx-block {
+    max-width: 25% !important;
+  }
+  .cdx-image-tool-tune--sizeMiddle .cdx-block {
+    max-width: 50% !important;
+  }
+  .cdx-image-tool-tune--sizeLarge .cdx-block {
+    max-width: 75% !important;
+  }
+}
+
+.cdx-image-tool-tune--sizeLarge img {
+  object-fit: cover;
+  max-width: 100%;
+}
+.cdx-image-tool-tune--sizeSmall img {
+  object-fit: cover;
+  max-width: 100%;
+}
+.cdx-image-tool-tune--sizeMiddle img {
+  object-fit: cover;
+  max-width: 100%;
+}
+
+.codex-editor.read-only .cdx-input.image-tool__caption:empty,
+.read-only > .codex-editor .cdx-input.image-tool__caption:empty {
+  display: none;
+}
+
+.cdx-image-tool-tune--resize .cdx-block {
+  position: relative;
+  overflow: visible;
+}
+
+.cdx-image-tool-tune--resize .cdx-block .resizable {
+  display: none;
+}
+
+.cdx-image-tool-tune--resize .image-tool__image-picture {
+  width: 100% !important;
+}
+.cdx-image-tool-tune--resize .cdx-block:hover .resizable {
+  display: block;
+}
+
+.cdx-image-tool-tune--resize .cdx-block .resizable .resizers .resizer {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: var(--primary-content);
+  border: 3px solid var(--primary);
+  position: absolute;
+}
+
+.cdx-image-tool-tune--resize .cdx-block .resizable .resizers .resizer.top-left {
+  left: -5px;
+  top: -5px;
+  cursor: nwse-resize;
+  /*resizer cursor*/
+}
+
+.cdx-image-tool-tune--resize
+  .cdx-block
+  .resizable
+  .resizers
+  .resizer.top-right {
+  right: -5px;
+  top: -5px;
+  cursor: nesw-resize;
+}
+
+.cdx-image-tool-tune--resize
+  .cdx-block
+  .resizable
+  .resizers
+  .resizer.bottom-left {
+  left: -5px;
+  bottom: -5px;
+  cursor: nesw-resize;
+}
+
+.cdx-image-tool-tune--resize
+  .cdx-block
+  .resizable
+  .resizers
+  .resizer.bottom-right {
+  right: -5px;
+  bottom: -5px;
+  cursor: nwse-resize;
+}
+
+.cdx-image-tool-tune--crop:hover,
+.cdx-image-tool-tune--crop.isCropping,
+.cdx-image-tool-tune--resize:hover {
+  z-index: 2;
+}
+
+.cdx-image-tool-tune--crop .image-tool__image {
+  position: relative;
+}
+
+.cdx-image-tool-tune--crop .isCropping .image-tool__image {
+  min-height: 600px;
+  min-width: 100%;
+}
+
+.cdx-image-tool-tune--crop .image-tool__image .crop-btn,
+.cdx-image-tool-tune--crop .image-tool__image .crop-save {
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: 7px;
+  background: var(--primary);
+  color: var(--primary-content);
+  text-align: center;
+  line-height: 20px;
+  cursor: pointer;
+  display: none;
+}
+
+.cdx-image-tool-tune--crop .image-tool__image:hover .crop-btn,
+.cdx-image-tool-tune--crop .image-tool__image:hover .crop-save {
+  display: block;
+}
+
+.cdx-image-tool-tune--crop .image-tool__image img.isCropped {
+  position: absolute;
+  min-width: unset;
+  max-width: unset;
+  min-height: unset;
+  max-height: unset;
+}
+
+.cdx-image-tool-tune--crop .cdx-block.image-tool.isCropping {
+  min-width: unset !important;
+  max-width: unset !important;
+  min-height: unset !important;
+  max-height: unset !important;
+}
+
+.ce-block {
+  margin: 0.8em 0;
+}
+.ce-toolbar {
+  z-index: 3;
+}
+
+.image-tool__caption {
+  background-color: white;
+}
+.image-tool {
+  position: relative;
+  z-index: 1;
+}
+
+.cdx-image-tool-tune {
+  display: flex;
+  justify-content: flex-start;
+  gap: 4px;
+  width: 100%;
+}

package/src/plugins/imageResizeCrop/index.ts

@@ -0,0 +1,5 @@
+import './index.css';
+
+export { default as ImageToolTune } from './ImageTune';
+export type { ImageToolTuneData } from './ImageTune';
+export type { ImageToolTuneConfig } from './ImageTune';

package/src/plugins/imageResizeCrop/types.d.ts

@@ -0,0 +1,23 @@
+declare module '*.css' {
+  const content: unknown;
+  export default content;
+}
+
+declare module '@editorjs/editorjs' {
+  export interface API {
+    i18n: {
+      t(key: string): string;
+    };
+    tooltip: {
+      onHover(element: HTMLElement, text: string): void;
+    };
+    readOnly: {
+      isEnabled: boolean;
+    };
+  }
+
+  export interface BlockAPI {
+    holder: HTMLElement;
+    dispatchChange(): void;
+  }
+}

package/src/plugins/imageTool/index.css

@@ -0,0 +1,145 @@
+.image-tool {
+  --bg-color: #cdd1e0;
+  --front-color: #388ae5;
+  --border-color: #e8e8eb
+}
+
+
+.image-tool__image {
+  border-radius: 3px;
+  overflow: hidden;
+  margin-bottom: 10px;
+  padding-bottom: 0
+}
+
+.image-tool__image-picture {
+  max-width: 100%;
+  vertical-align: bottom;
+  display: inline-block
+}
+
+.image-tool__image-preloader {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  background-size: cover;
+  margin: auto;
+  position: relative;
+  background-color: var(--bg-color);
+  background-position: center center
+}
+
+.image-tool__image-preloader:after {
+  content: "";
+  position: absolute;
+  z-index: 3;
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  border: 2px solid var(--bg-color);
+  border-top-color: var(--front-color);
+  left: 50%;
+  top: 50%;
+  margin-top: -30px;
+  margin-left: -30px;
+  animation: image-preloader-spin 2s infinite linear;
+  box-sizing: border-box
+}
+
+.image-tool__caption {
+  visibility: hidden;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  margin-bottom: 10px
+}
+
+.image-tool__caption[contentEditable=true][data-placeholder]:before {
+  position: absolute !important;
+  content: attr(data-placeholder);
+  color: #707684;
+  font-weight: 400;
+  display: none
+}
+
+.image-tool__caption[contentEditable=true][data-placeholder]:empty:before {
+  display: block
+}
+
+.image-tool__caption[contentEditable=true][data-placeholder]:empty:focus:before {
+  display: none
+}
+
+.image-tool--empty .image-tool__image,
+.image-tool--empty .image-tool__image-preloader {
+  display: none
+}
+
+.image-tool--empty .image-tool__caption,
+.image-tool--uploading .image-tool__caption {
+  visibility: hidden !important
+}
+
+.image-tool .cdx-button {
+  display: none;
+  align-items: center;
+  justify-content: center
+}
+
+.image-tool .cdx-button svg {
+  height: auto;
+  margin: 0 6px 0 0
+}
+
+.image-tool--filled .cdx-button,
+.image-tool--filled .image-tool__image-preloader {
+  display: none
+}
+
+.image-tool--uploading .image-tool__image {
+  min-height: 200px;
+  display: flex;
+  border: 1px solid var(--border-color);
+  background-color: #fff
+}
+
+.image-tool--uploading .image-tool__image-picture,
+.image-tool--uploading .cdx-button {
+  display: none
+}
+
+.image-tool--withBorder .image-tool__image {
+  border: 1px solid var(--border-color)
+}
+
+.image-tool--withBackground .image-tool__image {
+  padding: 15px;
+  background: var(--bg-color)
+}
+
+.image-tool--withBackground .image-tool__image-picture {
+  max-width: 60%;
+  margin: 0 auto
+}
+
+.image-tool--stretched .image-tool__image-picture {
+  width: 100%
+}
+
+.image-tool--caption .image-tool__caption {
+  visibility: visible
+}
+
+.image-tool--caption {
+  padding-bottom: 50px
+}
+
+@keyframes image-preloader-spin {
+  0% {
+    transform: rotate(0)
+  }
+
+  to {
+    transform: rotate(360deg)
+  }
+}