@gravity-ui/markdown-editor 13.6.0 → 13.7.0

package/build/styles.css

@@ -1152,4 +1152,436 @@ img.ProseMirror-separator {
   font-size: var(--g-text-code-inline-1-font-size);
   line-height: var(--g-text-code-inline-1-line-height);
   font-weight: var(--g-text-code-font-weight);
+}
+.pm-h-folding-hidden {
+  display: none;
+}
+
+.pm-h-folding-content {
+  padding-left: 28px;
+}
+
+.pm-h-folding-separator {
+  position: relative;
+}
+.pm-h-folding-separator::before {
+  position: absolute;
+  z-index: 1;
+  bottom: -4px;
+  left: 0;
+  width: 12px;
+  height: 12px;
+  content: "";
+  background-color: var(--g-color-text-secondary);
+  mask-image: url('data:image/svg+xml;svg,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M2 7.25a.75.75 0 0 0 0 1.5h5.69l-2.72 2.72a.75.75 0 1 0 1.06 1.06l4-4a.75.75 0 0 0 0-1.06l-4-4a.75.75 0 0 0-1.06 1.06l2.72 2.72zm7.47 4.22a.75.75 0 1 0 1.06 1.06l4-4a.75.75 0 0 0 0-1.06l-4-4a.75.75 0 1 0-1.06 1.06L12.94 8z" clip-rule="evenodd"/></svg>');
+  mask-size: 12px;
+  transform: translateY(80%);
+}
+.pm-h-folding-separator::after {
+  position: absolute;
+  z-index: 1;
+  bottom: -8px;
+  left: 16px;
+  display: block;
+  width: calc(100% - 16px - 56px - 6px);
+  content: "";
+  border-top: 1px dashed var(--g-color-line-generic);
+}
+
+.pm-h-folding-label::after {
+  position: absolute;
+  z-index: 1;
+  right: 2px;
+  bottom: -6px;
+  display: block;
+  padding: 0 8px;
+  content: attr(data-value);
+  color: var(--g-color-text-misc);
+  border-radius: 4px;
+  background-color: var(--g-color-base-misc-medium-hover);
+  transform: translate(0, 50%);
+  font-size: var(--g-text-body-1-font-size);
+  line-height: var(--g-text-body-1-line-height);
+  font-weight: var(--g-text-body-font-weight);
+}
+.g-md-image-skeleton {
+  vertical-align: middle;
+}
+.g-md-image-skeleton__skeleton {
+  width: min(var(--img-skeleton-width) * 1px, 100%);
+  height: min(var(--img-skeleton-height) * 1px, 700px);
+  margin-bottom: -5px;
+}
+.g-md-image-placeholder {
+  display: inline-flex;
+  align-items: center;
+  column-gap: 8px;
+  min-width: 300px;
+  padding: 12px 20px;
+  border-radius: 4px;
+  background-color: var(--g-color-base-simple-hover-solid);
+  font-size: var(--g-text-body-2-font-size);
+  line-height: var(--g-text-body-2-line-height);
+  font-weight: var(--g-text-body-font-weight);
+}
+.g-md-Mermaid {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 15px;
+  padding: 2px;
+  border: 1px solid var(--g-color-line-generic);
+  border-radius: var(--g-border-radius-m);
+}
+.g-md-Mermaid_edit {
+  display: flex;
+}
+.g-md-Mermaid__Preview {
+  flex: 1;
+}
+.g-md-Mermaid__Error {
+  flex: 1;
+  font-family: var(--g-font-family-monospace);
+  color: var(--g-color-text-danger);
+}
+.g-md-Mermaid__Editor {
+  flex: 1;
+  white-space: nowrap;
+  caret-color: auto;
+}
+.g-md-Mermaid__EditorPopover {
+  z-index: 1;
+  float: right;
+}
+.g-md-Mermaid__Controls {
+  display: flex;
+  justify-content: end;
+  margin-top: 5px;
+}
+.yfm-cut-title .g-md-yfm-cut-title-inner {
+  cursor: text;
+}
+.g-md-file-skeleton {
+  display: inline-flex;
+  align-items: center;
+}
+.g-md-file-skeleton__skeleton {
+  width: 120px;
+  height: 20px;
+}
+.g-md-file-placeholder {
+  margin: 0 4px;
+  pointer-events: none;
+}
+.g-md-file-placeholder .yfm-file__icon {
+  margin-right: 8px;
+}
+.g-md-yfm-html-block {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 15px;
+  padding-top: 28px;
+  border: 1px solid var(--g-color-line-generic);
+  border-radius: var(--g-border-radius-m);
+}
+.g-md-yfm-html-block_editing {
+  display: flex;
+  padding-top: 0;
+  border: 0;
+}
+.g-md-yfm-html-block__label {
+  position: absolute;
+  top: 8px;
+  left: 8px;
+}
+.g-md-yfm-html-block__menu {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+.g-md-yfm-html-block__preview {
+  flex: 1;
+}
+.g-md-yfm-html-block__error {
+  flex: 1;
+  font-family: var(--g-font-family-monospace);
+  color: var(--g-color-text-danger);
+}
+.g-md-yfm-html-block__editor {
+  flex: 1;
+  width: 50%;
+  white-space: nowrap;
+  caret-color: auto;
+}
+.g-md-yfm-html-block__editor .g-text-area__content {
+  font-size: 1em;
+  color: var(--yfm-color-hljs-subst);
+  border: 0;
+  border-radius: var(--g-border-radius-m);
+  background: var(--yfm-color-hljs-background);
+  font-feature-settings: normal;
+}
+.g-md-yfm-html-block__editor .g-text-area__control.g-md-YfmHtmlBlockHelper {
+  font-family: var(--yfm-font-family-monospace);
+}
+.g-md-yfm-html-block__editor-popover {
+  z-index: 1;
+  float: right;
+}
+.g-md-yfm-html-block__controls {
+  display: flex;
+  justify-content: end;
+  margin-top: 5px;
+}
+.g-md-yfm-html-block__content {
+  flex-grow: 1;
+}
+
+.g-root_theme_dark-hc .g-md-yfm-html-block_editing .g-text-area__content,
+.g-root_theme_dark .g-md-yfm-html-block_editing .g-text-area__content {
+  color: var(--g-color-text-primary);
+}
+.g-md-search-card {
+  padding: var(--g-spacing-2) var(--g-spacing-2) var(--g-spacing-3) var(--g-spacing-4);
+}
+.g-md-search-card__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--g-spacing-1);
+}
+.g-md-code-block-toolbar {
+  margin: 2px 8px;
+}
+
+.g-md-code-tooltip-menu {
+  min-width: 150px;
+  border-radius: 4px;
+}
+
+.g-md-code-block__select-popup {
+  width: 175px;
+  max-height: 200px;
+}
+.g-md-code-block__select-popup .g-select-filter {
+  border-bottom: 1px solid var(--g-color-line-generic);
+}
+.g-md-code-block__select-popup .g-select-filter .g-text-input__content {
+  border: none;
+}
+.g-md-code-block__select-popup .g-md-code-block__select-empty {
+  margin-left: 4px;
+}
+
+.g-md-code-block__select-button {
+  margin: auto 0;
+}
+.table-cell-floating-button.g-button {
+  height: 28px;
+  line-height: 28px;
+}
+.table-cell-floating-button.g-button .g-button__icon {
+  width: 12px;
+}
+
+.table-cell-floating-icon {
+  transform: rotate(90deg);
+}
+.g-md-img-size-node-view__wrapper {
+  position: relative;
+  display: inline-block;
+}
+.yfm .yfm-note {
+  max-width: 1296px;
+  margin: 20px 0;
+  padding: 20px 20px 20px 64px;
+  border-radius: 10px;
+}
+.yfm .yfm-note .yfm-note-title {
+  font-weight: 700;
+}
+.yfm .yfm-note > p {
+  margin: 0 0 10px 0;
+}
+.yfm .yfm-note > p:first-child::before {
+  box-sizing: content-box;
+  display: block;
+  width: 24px;
+  height: 24px;
+  margin-top: -2px;
+  margin-left: -44px;
+  padding-right: 20px;
+  float: left;
+}
+.yfm .yfm-note > p:last-child {
+  margin-bottom: 0;
+}
+.yfm .yfm-note.yfm-accent-info > p:first-child::before {
+  content: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 16 16"%3E%3Ccircle cx="8" cy="8" r="8" fill="rgb(2,123,243)"/%3E%3Crect width="1" height="5" x="7.5" y="6.5" stroke="%23fff" rx=".5"/%3E%3Ccircle cx="8" cy="4" r="1" fill="%23fff"/%3E%3C/svg%3E');
+}
+.yfm .yfm-note.yfm-accent-tip > p:first-child::before {
+  content: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 16 16"%3E%3Ccircle cx="8" cy="8" r="8" fill="rgb(86,189,103)"/%3E%3Crect width="1" height="5" x="7.5" y="6.5" stroke="%23fff" rx=".5"/%3E%3Ccircle cx="8" cy="4" r="1" fill="%23fff"/%3E%3C/svg%3E');
+}
+.yfm .yfm-note.yfm-accent-alert > p:first-child::before {
+  content: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 16 16"%3E%3Ccircle cx="8" cy="8" r="8" fill="rgb(255,70,69)"/%3E%3Crect width="1" height="5" x="7.5" y="6.5" stroke="%23fff" rx=".5"/%3E%3Ccircle cx="8" cy="4" r="1" fill="%23fff"/%3E%3C/svg%3E');
+}
+.yfm .yfm-note.yfm-accent-warning > p:first-child::before {
+  content: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 16 16"%3E%3Ccircle cx="8" cy="8" r="8" fill="rgb(241,149,24)"/%3E%3Crect width="1" height="5" x="7.5" y="6.5" stroke="%23fff" rx=".5"/%3E%3Ccircle cx="8" cy="4" r="1" fill="%23fff"/%3E%3C/svg%3E');
+}
+.yfm .yfm-note.yfm-accent-info {
+  background: rgba(2, 123, 243, 0.08);
+}
+.yfm .yfm-note.yfm-accent-tip {
+  background: rgba(63, 201, 46, 0.1);
+}
+.yfm .yfm-note.yfm-accent-alert {
+  background: rgba(235, 50, 38, 0.08);
+}
+.yfm .yfm-note.yfm-accent-warning {
+  background: rgba(255, 136, 0, 0.15);
+}
+
+.g-md-yfm-note-toolbar {
+  margin: 2px 8px;
+}
+
+.g-md-toolbar-group__s-button_id_note-type-tip {
+  color: #56bd67;
+}
+.g-md-toolbar-group__s-button_id_note-type-info {
+  color: #027bf3;
+}
+.g-md-toolbar-group__s-button_id_note-type-alert {
+  color: #ff4645;
+}
+.g-md-toolbar-group__s-button_id_note-type-warning {
+  color: #f19518;
+}
+.g-md-table-view__hack-strip {
+  position: absolute;
+  left: -13px;
+  display: block;
+  width: 13px;
+  height: 100%;
+  background: transparent;
+}
+.g-md-table-view__wrapper {
+  position: relative;
+  display: inline-block;
+  max-width: calc(100% - 18px);
+  margin-right: 18px;
+  /* stylelint-disable declaration-no-important */
+  margin-bottom: 18px !important;
+}
+.g-md-table-view__buttons-visible .g-md-table-view__plus-button-controls {
+  pointer-events: initial;
+  opacity: 1;
+}
+.g-md-table-view__plus-button-controls {
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 150ms ease 50ms;
+}
+.g-md-table-view__plus-button-controls_right {
+  position: absolute;
+  z-index: 100;
+  top: 0;
+  right: -18px;
+  display: flex;
+  align-items: center;
+  width: 16px;
+  height: 100%;
+}
+.g-md-table-view__plus-button-controls_bottom {
+  position: absolute;
+  z-index: 100;
+  bottom: -18px;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  height: 16px;
+}
+.g-md-table-view__plus-button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+}
+.g-md-table-view__plus-button_right {
+  width: 16px;
+  height: 100%;
+}
+.g-md-table-view__plus-button_bottom {
+  width: 100%;
+  height: 16px;
+}
+
+.g-md-table-view.g-md-table-view {
+  z-index: unset;
+  display: block;
+  overflow: auto;
+  box-sizing: content-box;
+  width: fit-content;
+  margin: -13px 0 0 -13px;
+  padding: 13px 0 0 13px;
+  border: none;
+  border-radius: 0;
+  background: transparent !important;
+}
+.g-md-table-view.g-md-table-view tbody {
+  display: block;
+  border-radius: 8px;
+  background: var(--g-color-base-background);
+  box-shadow: inset 0 0 0 1px var(--g-color-line-generic);
+}
+
+.g-md-table-wrapper {
+  display: inline-block;
+  width: 100%;
+  margin-right: 2px;
+}
+.g-md-table-cell-view__left-button {
+  position: absolute;
+  z-index: 110;
+  top: calc(50% - 14px);
+  left: -13px;
+  pointer-events: none;
+  opacity: 0;
+  border-radius: var(--g-border-radius-s);
+  background: var(--g-color-base-background);
+}
+.g-md-table-cell-view__left-button:hover {
+  pointer-events: initial;
+  opacity: 1;
+}
+.g-md-table-cell-view__upper-button {
+  position: absolute;
+  z-index: 110;
+  top: -13px;
+  left: calc(50% - 14px);
+  pointer-events: none;
+  opacity: 0;
+  border-radius: var(--g-border-radius-s);
+  background: var(--g-color-base-background);
+  transform: rotate(90deg);
+}
+.g-md-table-cell-view__upper-button:hover {
+  pointer-events: initial;
+  opacity: 1;
+}
+.g-md-table-cell-view__upper-visible .g-md-table-cell-view__upper-button {
+  pointer-events: initial;
+  opacity: 1;
+}
+.g-md-table-cell-view__left-visible .g-md-table-cell-view__left-button {
+  pointer-events: initial;
+  opacity: 1;
+}
+.g-md-image-tooltip-form__input_type_width, .g-md-image-tooltip-form__input_type_height {
+  max-width: 112px;
+}
+.g-md-image-tooltip-form__size-controls {
+  display: flex;
+  align-items: center;
+  gap: 0 16px;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/markdown-editor",
-  "version": "13.6.0",
+  "version": "13.7.0",
   "description": "Markdown wysiwyg and markup editor",
   "license": "MIT",
   "repository": {