@zero-library/common 2.3.6 → 2.3.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/index.cjs.js +4620 -4596
  2. package/dist/index.cjs.js.map +1 -1
  3. package/dist/index.css +982 -980
  4. package/dist/index.css.map +1 -1
  5. package/dist/index.d.mts +28 -10
  6. package/dist/index.d.ts +28 -10
  7. package/dist/index.esm.js +4946 -4922
  8. package/dist/index.esm.js.map +1 -1
  9. package/package.json +1 -1
package/dist/index.css CHANGED
@@ -602,12 +602,13 @@
602
602
  text-decoration: underline;
603
603
  text-decoration-color: #ff9500;
604
604
  text-underline-offset: 4px;
605
+ background-color: rgba(255, 149, 0, 0.2);
605
606
  }
606
607
  .styles_module_editorParent .styles_module_contentWrapper .styles_module_simpleEditorContent .editor-annotation:hover {
607
- background-color: rgba(255, 149, 0, 0.2);
608
+ background-color: rgba(255, 149, 0, 0.4);
608
609
  }
609
610
  .styles_module_editorParent .styles_module_contentWrapper .styles_module_simpleEditorContent .editor-annotation .editor-annotation--selected {
610
- background-color: rgba(255, 149, 0, 0.4);
611
+ background-color: rgba(255, 149, 0, 0.6);
611
612
  }
612
613
  .styles_module_editorParent .styles_module_contentWrapper .styles_module_simpleEditorContent .editor-collection {
613
614
  display: inline-block;
@@ -615,12 +616,13 @@
615
616
  text-decoration: underline;
616
617
  text-decoration-color: #34afbe;
617
618
  text-underline-offset: 4px;
619
+ background-color: rgba(52, 175, 190, 0.2);
618
620
  }
619
621
  .styles_module_editorParent .styles_module_contentWrapper .styles_module_simpleEditorContent .editor-collection:hover {
620
- background-color: rgba(52, 175, 190, 0.2);
622
+ background-color: rgba(52, 175, 190, 0.4);
621
623
  }
622
624
  .styles_module_editorParent .styles_module_contentWrapper .styles_module_simpleEditorContent .editor-collection .editor-collection--selected {
623
- background-color: rgba(52, 175, 190, 0.4);
625
+ background-color: rgba(52, 175, 190, 0.6);
624
626
  }
625
627
  .styles_module_editorParent .styles_module_contentWrapper .styles_module_simpleEditorContent .tiptap.ProseMirror {
626
628
  font-family: "DM Sans", sans-serif;
@@ -639,1134 +641,1168 @@
639
641
  width: 350px;
640
642
  }
641
643
 
642
- /* src/components/MarkdownEditor/components/tiptap-ui-primitive/tooltip/tooltip.less */
643
- .tiptap-tooltip {
644
- --tt-tooltip-bg: var(--tt-gray-light-900);
645
- --tt-tooltip-text: var(--white);
646
- --tt-kbd: var(--tt-gray-dark-a-400);
644
+ /* src/components/MarkdownEditor/components/tiptap-node/blockquote-node/blockquote-node.less */
645
+ .tiptap.ProseMirror {
646
+ --blockquote-bg-color: var(--tt-gray-light-900);
647
647
  }
648
- .dark .tiptap-tooltip {
649
- --tt-tooltip-bg: var(--white);
650
- --tt-tooltip-text: var(--tt-gray-light-600);
651
- --tt-kbd: var(--tt-gray-light-a-400);
648
+ .dark .tiptap.ProseMirror {
649
+ --blockquote-bg-color: var(--tt-gray-dark-900);
652
650
  }
653
- .tiptap-tooltip {
654
- z-index: 200;
655
- overflow: hidden;
656
- border-radius: var(--tt-radius-md, 0.375rem);
657
- background-color: var(--tt-tooltip-bg);
658
- padding: 0.375rem 0.5rem;
659
- font-size: 0.75rem;
660
- font-weight: 500;
661
- color: var(--tt-tooltip-text);
662
- box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
663
- text-align: center;
651
+ .tiptap.ProseMirror blockquote {
652
+ position: relative;
653
+ padding-left: 1em;
654
+ padding-top: 0.375em;
655
+ padding-bottom: 0.375em;
656
+ margin: 1.5rem 0;
664
657
  }
665
- .tiptap-tooltip kbd {
666
- display: inline-block;
667
- text-align: center;
668
- vertical-align: baseline;
669
- font-family:
670
- ui-sans-serif,
671
- system-ui,
672
- -apple-system,
673
- BlinkMacSystemFont,
674
- "Segoe UI",
675
- Roboto,
676
- "Helvetica Neue",
677
- Arial,
678
- "Noto Sans",
679
- sans-serif;
680
- text-transform: capitalize;
681
- color: var(--tt-kbd);
658
+ .tiptap.ProseMirror blockquote p {
659
+ margin-top: 0;
682
660
  }
683
-
684
- /* src/components/MarkdownEditor/components/tiptap-ui-primitive/button/button-colors.less */
685
- .tiptap-button {
686
- --tt-button-default-bg-color: var(--tt-gray-light-a-100);
687
- --tt-button-hover-bg-color: var(--tt-gray-light-200);
688
- --tt-button-active-bg-color: var(--tt-gray-light-a-200);
689
- --tt-button-active-bg-color-emphasized: var(--tt-brand-color-100);
690
- --tt-button-active-bg-color-subdued: var(--tt-gray-light-a-200);
691
- --tt-button-active-hover-bg-color: var(--tt-gray-light-300);
692
- --tt-button-active-hover-bg-color-emphasized: var(--tt-brand-color-200);
693
- --tt-button-active-hover-bg-color-subdued: var(--tt-gray-light-a-300);
694
- --tt-button-disabled-bg-color: var(--tt-gray-light-a-50);
695
- --tt-button-default-text-color: var(--tt-gray-light-a-600);
696
- --tt-button-hover-text-color: var(--tt-gray-light-a-900);
697
- --tt-button-active-text-color: var(--tt-gray-light-a-900);
698
- --tt-button-active-text-color-emphasized: var(--tt-gray-light-a-900);
699
- --tt-button-active-text-color-subdued: var(--tt-gray-light-a-900);
700
- --tt-button-disabled-text-color: var(--tt-gray-light-a-400);
701
- --tt-button-default-icon-color: var(--tt-gray-light-a-600);
702
- --tt-button-hover-icon-color: var(--tt-gray-light-a-900);
703
- --tt-button-active-icon-color: var(--tt-brand-color-500);
704
- --tt-button-active-icon-color-emphasized: var(--tt-brand-color-600);
705
- --tt-button-active-icon-color-subdued: var(--tt-gray-light-a-900);
706
- --tt-button-disabled-icon-color: var(--tt-gray-light-a-400);
707
- --tt-button-default-icon-sub-color: var(--tt-gray-light-a-400);
708
- --tt-button-hover-icon-sub-color: var(--tt-gray-light-a-500);
709
- --tt-button-active-icon-sub-color: var(--tt-gray-light-a-400);
710
- --tt-button-active-icon-sub-color-emphasized: var(--tt-gray-light-a-500);
711
- --tt-button-active-icon-sub-color-subdued: var(--tt-gray-light-a-400);
712
- --tt-button-disabled-icon-sub-color: var(--tt-gray-light-a-100);
713
- --tt-button-default-dropdown-arrows-color: var(--tt-gray-light-a-600);
714
- --tt-button-hover-dropdown-arrows-color: var(--tt-gray-light-a-700);
715
- --tt-button-active-dropdown-arrows-color: var(--tt-gray-light-a-600);
716
- --tt-button-active-dropdown-arrows-color-emphasized: var(--tt-gray-light-a-700);
717
- --tt-button-active-dropdown-arrows-color-subdued: var(--tt-gray-light-a-600);
718
- --tt-button-disabled-dropdown-arrows-color: var(--tt-gray-light-a-400);
661
+ .tiptap.ProseMirror blockquote::before,
662
+ .tiptap.ProseMirror blockquote.is-empty::before {
663
+ position: absolute;
664
+ bottom: 0;
665
+ left: 0;
666
+ top: 0;
667
+ height: 100%;
668
+ width: 0.25em;
669
+ background-color: var(--blockquote-bg-color);
670
+ content: "";
671
+ border-radius: 0;
719
672
  }
720
- .dark .tiptap-button {
721
- --tt-button-default-bg-color: var(--tt-gray-dark-a-100);
722
- --tt-button-hover-bg-color: var(--tt-gray-dark-200);
723
- --tt-button-active-bg-color: var(--tt-gray-dark-a-200);
724
- --tt-button-active-bg-color-emphasized: var(--tt-brand-color-900);
725
- --tt-button-active-bg-color-subdued: var(--tt-gray-dark-a-200);
726
- --tt-button-active-hover-bg-color: var(--tt-gray-dark-300);
727
- --tt-button-active-hover-bg-color-emphasized: var(--tt-brand-color-800);
728
- --tt-button-active-hover-bg-color-subdued: var(--tt-gray-dark-a-300);
729
- --tt-button-disabled-bg-color: var(--tt-gray-dark-a-50);
673
+
674
+ /* src/components/MarkdownEditor/components/tiptap-node/code-block-node/code-block-node.less */
675
+ .tiptap.ProseMirror {
676
+ --tt-inline-code-bg-color: var(--tt-gray-light-a-100);
677
+ --tt-inline-code-text-color: var(--tt-gray-light-a-700);
678
+ --tt-inline-code-border-color: var(--tt-gray-light-a-200);
679
+ --tt-codeblock-bg: var(--tt-gray-light-a-50);
680
+ --tt-codeblock-text: var(--tt-gray-light-a-800);
681
+ --tt-codeblock-border: var(--tt-gray-light-a-200);
730
682
  }
731
- .dark .tiptap-button {
732
- --tt-button-default-text-color: var(--tt-gray-dark-a-600);
733
- --tt-button-hover-text-color: var(--tt-gray-dark-a-900);
734
- --tt-button-active-text-color: var(--tt-gray-dark-a-900);
735
- --tt-button-active-text-color-emphasized: var(--tt-gray-dark-a-900);
736
- --tt-button-active-text-color-subdued: var(--tt-gray-dark-a-900);
737
- --tt-button-disabled-text-color: var(--tt-gray-dark-a-300);
683
+ .dark .tiptap.ProseMirror {
684
+ --tt-inline-code-bg-color: var(--tt-gray-dark-a-100);
685
+ --tt-inline-code-text-color: var(--tt-gray-dark-a-700);
686
+ --tt-inline-code-border-color: var(--tt-gray-dark-a-200);
687
+ --tt-codeblock-bg: var(--tt-gray-dark-a-50);
688
+ --tt-codeblock-text: var(--tt-gray-dark-a-800);
689
+ --tt-codeblock-border: var(--tt-gray-dark-a-200);
738
690
  }
739
- .dark .tiptap-button {
740
- --tt-button-default-icon-color: var(--tt-gray-dark-a-600);
741
- --tt-button-hover-icon-color: var(--tt-gray-dark-a-900);
742
- --tt-button-active-icon-color: var(--tt-brand-color-400);
743
- --tt-button-active-icon-color-emphasized: var(--tt-brand-color-400);
744
- --tt-button-active-icon-color-subdued: var(--tt-gray-dark-a-900);
745
- --tt-button-disabled-icon-color: var(--tt-gray-dark-a-400);
691
+ .tiptap.ProseMirror code {
692
+ background-color: var(--tt-inline-code-bg-color);
693
+ color: var(--tt-inline-code-text-color);
694
+ border: 1px solid var(--tt-inline-code-border-color);
695
+ font-family: "JetBrains Mono NL", monospace;
696
+ font-size: 0.875em;
697
+ line-height: 1.4;
698
+ border-radius: 6px/0.375rem;
699
+ padding: 0.1em 0.2em;
746
700
  }
747
- .dark .tiptap-button {
748
- --tt-button-default-icon-sub-color: var(--tt-gray-dark-a-300);
749
- --tt-button-hover-icon-sub-color: var(--tt-gray-dark-a-400);
750
- --tt-button-active-icon-sub-color: var(--tt-gray-dark-a-300);
751
- --tt-button-active-icon-sub-color-emphasized: var(--tt-gray-dark-a-400);
752
- --tt-button-active-icon-sub-color-subdued: var(--tt-gray-dark-a-300);
753
- --tt-button-disabled-icon-sub-color: var(--tt-gray-dark-a-100);
701
+ .tiptap.ProseMirror pre {
702
+ background-color: var(--tt-codeblock-bg);
703
+ color: var(--tt-codeblock-text);
704
+ border: 1px solid var(--tt-codeblock-border);
705
+ margin-top: 1.5em;
706
+ margin-bottom: 1.5em;
707
+ padding: 1em;
708
+ font-size: 1rem;
709
+ border-radius: 6px/0.375rem;
754
710
  }
755
- .dark .tiptap-button {
756
- --tt-button-default-dropdown-arrows-color: var(--tt-gray-dark-a-600);
757
- --tt-button-hover-dropdown-arrows-color: var(--tt-gray-dark-a-700);
758
- --tt-button-active-dropdown-arrows-color: var(--tt-gray-dark-a-600);
759
- --tt-button-active-dropdown-arrows-color-emphasized: var(--tt-gray-dark-a-700);
760
- --tt-button-active-dropdown-arrows-color-subdued: var(--tt-gray-dark-a-600);
761
- --tt-button-disabled-dropdown-arrows-color: var(--tt-gray-dark-a-400);
711
+ .tiptap.ProseMirror pre code {
712
+ background-color: transparent;
713
+ border: none;
714
+ border-radius: 0;
715
+ -webkit-text-fill-color: inherit;
716
+ color: inherit;
762
717
  }
763
- .tiptap-button[data-style=ghost] {
764
- --tt-button-default-bg-color: var(--transparent);
765
- --tt-button-hover-bg-color: var(--tt-gray-light-200);
766
- --tt-button-active-bg-color: var(--tt-gray-light-a-100);
767
- --tt-button-active-bg-color-emphasized: var(--tt-brand-color-100);
768
- --tt-button-active-bg-color-subdued: var(--tt-gray-light-a-100);
769
- --tt-button-active-hover-bg-color: var(--tt-gray-light-200);
770
- --tt-button-active-hover-bg-color-emphasized: var(--tt-brand-color-200);
771
- --tt-button-active-hover-bg-color-subdued: var(--tt-gray-light-a-200);
772
- --tt-button-disabled-bg-color: var(--transparent);
773
- --tt-button-default-text-color: var(--tt-gray-light-a-600);
774
- --tt-button-hover-text-color: var(--tt-gray-light-a-900);
775
- --tt-button-active-text-color: var(--tt-gray-light-a-900);
776
- --tt-button-active-text-color-emphasized: var(--tt-gray-light-a-900);
777
- --tt-button-active-text-color-subdued: var(--tt-gray-light-a-900);
778
- --tt-button-disabled-text-color: var(--tt-gray-light-a-400);
779
- --tt-button-default-icon-color: var(--tt-gray-light-a-600);
780
- --tt-button-hover-icon-color: var(--tt-gray-light-a-900);
781
- --tt-button-active-icon-color: var(--tt-brand-color-500);
782
- --tt-button-active-icon-color-emphasized: var(--tt-brand-color-600);
783
- --tt-button-active-icon-color-subdued: var(--tt-gray-light-a-900);
784
- --tt-button-disabled-icon-color: var(--tt-gray-light-a-400);
785
- --tt-button-default-icon-sub-color: var(--tt-gray-light-a-400);
786
- --tt-button-hover-icon-sub-color: var(--tt-gray-light-a-500);
787
- --tt-button-active-icon-sub-color: var(--tt-gray-light-a-400);
788
- --tt-button-active-icon-sub-color-emphasized: var(--tt-gray-light-a-500);
789
- --tt-button-active-icon-sub-color-subdued: var(--tt-gray-light-a-400);
790
- --tt-button-disabled-icon-sub-color: var(--tt-gray-light-a-100);
791
- --tt-button-default-dropdown-arrows-color: var(--tt-gray-light-a-600);
792
- --tt-button-hover-dropdown-arrows-color: var(--tt-gray-light-a-700);
793
- --tt-button-active-dropdown-arrows-color: var(--tt-gray-light-a-600);
794
- --tt-button-active-dropdown-arrows-color-emphasized: var(--tt-gray-light-a-700);
795
- --tt-button-active-dropdown-arrows-color-subdued: var(--tt-gray-light-a-600);
796
- --tt-button-disabled-dropdown-arrows-color: var(--tt-gray-light-a-400);
718
+
719
+ /* src/components/MarkdownEditor/components/tiptap-node/heading-node/heading-node.less */
720
+ .tiptap.ProseMirror h1,
721
+ .tiptap.ProseMirror h2,
722
+ .tiptap.ProseMirror h3,
723
+ .tiptap.ProseMirror h4 {
724
+ position: relative;
725
+ color: inherit;
726
+ font-style: inherit;
797
727
  }
798
- .dark .tiptap-button[data-style=ghost] {
799
- --tt-button-default-bg-color: var(--transparent);
800
- --tt-button-hover-bg-color: var(--tt-gray-dark-200);
801
- --tt-button-active-bg-color: var(--tt-gray-dark-a-100);
802
- --tt-button-active-bg-color-emphasized: var(--tt-brand-color-900);
803
- --tt-button-active-bg-color-subdued: var(--tt-gray-dark-a-100);
804
- --tt-button-active-hover-bg-color: var(--tt-gray-dark-200);
805
- --tt-button-active-hover-bg-color-emphasized: var(--tt-brand-color-800);
806
- --tt-button-active-hover-bg-color-subdued: var(--tt-gray-dark-a-200);
807
- --tt-button-disabled-bg-color: var(--transparent);
728
+ .tiptap.ProseMirror h1:first-child,
729
+ .tiptap.ProseMirror h2:first-child,
730
+ .tiptap.ProseMirror h3:first-child,
731
+ .tiptap.ProseMirror h4:first-child,
732
+ .tiptap.ProseMirror h1:first-of-type,
733
+ .tiptap.ProseMirror h2:first-of-type,
734
+ .tiptap.ProseMirror h3:first-of-type,
735
+ .tiptap.ProseMirror h4:first-of-type {
736
+ margin-top: 0;
808
737
  }
809
- .dark .tiptap-button[data-style=ghost] {
810
- --tt-button-default-text-color: var(--tt-gray-dark-a-600);
811
- --tt-button-hover-text-color: var(--tt-gray-dark-a-900);
812
- --tt-button-active-text-color: var(--tt-gray-dark-a-900);
813
- --tt-button-active-text-color-emphasized: var(--tt-gray-dark-a-900);
814
- --tt-button-active-text-color-subdued: var(--tt-gray-dark-a-900);
815
- --tt-button-disabled-text-color: var(--tt-gray-dark-a-300);
738
+ .tiptap.ProseMirror h1 {
739
+ font-size: 1.5em;
740
+ font-weight: 700;
741
+ margin-top: 3em;
816
742
  }
817
- .dark .tiptap-button[data-style=ghost] {
818
- --tt-button-default-icon-color: var(--tt-gray-dark-a-600);
819
- --tt-button-hover-icon-color: var(--tt-gray-dark-a-900);
820
- --tt-button-active-icon-color: var(--tt-brand-color-400);
821
- --tt-button-active-icon-color-emphasized: var(--tt-brand-color-300);
822
- --tt-button-active-icon-color-subdued: var(--tt-gray-dark-a-900);
823
- --tt-button-disabled-icon-color: var(--tt-gray-dark-a-400);
743
+ .tiptap.ProseMirror h2 {
744
+ font-size: 1.25em;
745
+ font-weight: 700;
746
+ margin-top: 2.5em;
824
747
  }
825
- .dark .tiptap-button[data-style=ghost] {
826
- --tt-button-default-icon-sub-color: var(--tt-gray-dark-a-300);
827
- --tt-button-hover-icon-sub-color: var(--tt-gray-dark-a-400);
828
- --tt-button-active-icon-sub-color: var(--tt-gray-dark-a-300);
829
- --tt-button-active-icon-sub-color-emphasized: var(--tt-gray-dark-a-400);
830
- --tt-button-active-icon-sub-color-subdued: var(--tt-gray-dark-a-300);
831
- --tt-button-disabled-icon-sub-color: var(--tt-gray-dark-a-100);
748
+ .tiptap.ProseMirror h3 {
749
+ font-size: 1.125em;
750
+ font-weight: 600;
751
+ margin-top: 2em;
832
752
  }
833
- .dark .tiptap-button[data-style=ghost] {
834
- --tt-button-default-dropdown-arrows-color: var(--tt-gray-dark-a-600);
835
- --tt-button-hover-dropdown-arrows-color: var(--tt-gray-dark-a-700);
836
- --tt-button-active-dropdown-arrows-color: var(--tt-gray-dark-a-600);
837
- --tt-button-active-dropdown-arrows-color-emphasized: var(--tt-gray-dark-a-700);
838
- --tt-button-active-dropdown-arrows-color-subdued: var(--tt-gray-dark-a-600);
839
- --tt-button-disabled-dropdown-arrows-color: var(--tt-gray-dark-a-400);
753
+ .tiptap.ProseMirror h4 {
754
+ font-size: 1em;
755
+ font-weight: 600;
756
+ margin-top: 2em;
840
757
  }
841
- .tiptap-button[data-style=primary] {
842
- --tt-button-default-bg-color: var(--tt-brand-color-500);
843
- --tt-button-hover-bg-color: var(--tt-brand-color-600);
844
- --tt-button-active-bg-color: var(--tt-brand-color-100);
845
- --tt-button-active-bg-color-emphasized: var(--tt-brand-color-100);
846
- --tt-button-active-bg-color-subdued: var(--tt-brand-color-100);
847
- --tt-button-active-hover-bg-color: var(--tt-brand-color-200);
848
- --tt-button-active-hover-bg-color-emphasized: var(--tt-brand-color-200);
849
- --tt-button-active-hover-bg-color-subdued: var(--tt-brand-color-200);
850
- --tt-button-disabled-bg-color: var(--tt-gray-light-a-100);
851
- --tt-button-default-text-color: var(--white);
852
- --tt-button-hover-text-color: var(--white);
853
- --tt-button-active-text-color: var(--tt-gray-light-a-900);
854
- --tt-button-active-text-color-emphasized: var(--tt-gray-light-a-900);
855
- --tt-button-active-text-color-subdued: var(--tt-gray-light-a-900);
856
- --tt-button-disabled-text-color: var(--tt-gray-light-a-400);
857
- --tt-button-default-icon-color: var(--white);
858
- --tt-button-hover-icon-color: var(--white);
859
- --tt-button-active-icon-color: var(--tt-brand-color-600);
860
- --tt-button-active-icon-color-emphasized: var(--tt-brand-color-600);
861
- --tt-button-active-icon-color-subdued: var(--tt-brand-color-600);
862
- --tt-button-disabled-icon-color: var(--tt-gray-light-a-400);
863
- --tt-button-default-icon-sub-color: var(--tt-gray-dark-a-500);
864
- --tt-button-hover-icon-sub-color: var(--tt-gray-dark-a-500);
865
- --tt-button-active-icon-sub-color: var(--tt-gray-light-a-500);
866
- --tt-button-active-icon-sub-color-emphasized: var(--tt-gray-light-a-500);
867
- --tt-button-active-icon-sub-color-subdued: var(--tt-gray-light-a-500);
868
- --tt-button-disabled-icon-sub-color: var(--tt-gray-light-a-100);
869
- --tt-button-default-dropdown-arrows-color: var(--white);
870
- --tt-button-hover-dropdown-arrows-color: var(--white);
871
- --tt-button-active-dropdown-arrows-color: var(--tt-gray-light-a-700);
872
- --tt-button-active-dropdown-arrows-color-emphasized: var(--tt-gray-light-a-700);
873
- --tt-button-active-dropdown-arrows-color-subdued: var(--tt-gray-light-a-700);
874
- --tt-button-disabled-dropdown-arrows-color: var(--tt-gray-light-a-400);
758
+
759
+ /* src/components/MarkdownEditor/components/tiptap-node/horizontal-rule-node/horizontal-rule-node.less */
760
+ .tiptap.ProseMirror {
761
+ --horizontal-rule-color: var(--tt-gray-light-a-200);
875
762
  }
876
- .dark .tiptap-button[data-style=primary] {
877
- --tt-button-default-bg-color: var(--tt-brand-color-500);
878
- --tt-button-hover-bg-color: var(--tt-brand-color-600);
879
- --tt-button-active-bg-color: var(--tt-brand-color-900);
880
- --tt-button-active-bg-color-emphasized: var(--tt-brand-color-900);
881
- --tt-button-active-bg-color-subdued: var(--tt-brand-color-900);
882
- --tt-button-active-hover-bg-color: var(--tt-brand-color-800);
883
- --tt-button-active-hover-bg-color-emphasized: var(--tt-brand-color-800);
884
- --tt-button-active-hover-bg-color-subdued: var(--tt-brand-color-800);
885
- --tt-button-disabled-bg-color: var(--tt-gray-dark-a-100);
763
+ .dark .tiptap.ProseMirror {
764
+ --horizontal-rule-color: var(--tt-gray-dark-a-200);
886
765
  }
887
- .dark .tiptap-button[data-style=primary] {
888
- --tt-button-default-text-color: var(--white);
889
- --tt-button-hover-text-color: var(--white);
890
- --tt-button-active-text-color: var(--tt-gray-dark-a-900);
891
- --tt-button-active-text-color-emphasized: var(--tt-gray-dark-a-900);
892
- --tt-button-active-text-color-subdued: var(--tt-gray-dark-a-900);
893
- --tt-button-disabled-text-color: var(--tt-gray-dark-a-300);
766
+ .tiptap.ProseMirror hr {
767
+ border: none;
768
+ height: 1px;
769
+ background-color: var(--horizontal-rule-color);
894
770
  }
895
- .dark .tiptap-button[data-style=primary] {
896
- --tt-button-default-icon-color: var(--white);
897
- --tt-button-hover-icon-color: var(--white);
898
- --tt-button-active-icon-color: var(--tt-brand-color-400);
899
- --tt-button-active-icon-color-emphasized: var(--tt-brand-color-400);
900
- --tt-button-active-icon-color-subdued: var(--tt-brand-color-400);
901
- --tt-button-disabled-icon-color: var(--tt-gray-dark-a-300);
771
+ .tiptap.ProseMirror [data-type=horizontalRule] {
772
+ margin-top: 2.25em;
773
+ margin-bottom: 2.25em;
774
+ padding-top: 0.75rem;
775
+ padding-bottom: 0.75rem;
902
776
  }
903
- .dark .tiptap-button[data-style=primary] {
904
- --tt-button-default-icon-sub-color: var(--tt-gray-dark-a-400);
905
- --tt-button-hover-icon-sub-color: var(--tt-gray-dark-a-500);
906
- --tt-button-active-icon-sub-color: var(--tt-gray-dark-a-300);
907
- --tt-button-active-icon-sub-color-emphasized: var(--tt-gray-dark-a-400);
908
- --tt-button-active-icon-sub-color-subdued: var(--tt-gray-dark-a-300);
909
- --tt-button-disabled-icon-sub-color: var(--tt-gray-dark-a-100);
777
+
778
+ /* src/components/MarkdownEditor/components/tiptap-node/image-node/image-node.less */
779
+ .tiptap.ProseMirror img {
780
+ max-width: 100%;
781
+ height: auto;
782
+ display: block;
910
783
  }
911
- .dark .tiptap-button[data-style=primary] {
912
- --tt-button-default-dropdown-arrows-color: var(--white);
913
- --tt-button-hover-dropdown-arrows-color: var(--white);
914
- --tt-button-active-dropdown-arrows-color: var(--tt-gray-dark-a-600);
915
- --tt-button-active-dropdown-arrows-color-emphasized: var(--tt-gray-dark-a-600);
916
- --tt-button-active-dropdown-arrows-color-subdued: var(--tt-gray-dark-a-600);
917
- --tt-button-disabled-dropdown-arrows-color: var(--tt-gray-dark-a-400);
784
+ .tiptap.ProseMirror > img:not([data-type=emoji] img) {
785
+ margin: 2rem 0;
786
+ outline: 0.125rem solid transparent;
787
+ border-radius: var(--tt-radius-xs, 0.25rem);
918
788
  }
919
-
920
- /* src/components/MarkdownEditor/components/tiptap-ui-primitive/button/button-group.less */
921
- .tiptap-button-group {
922
- position: relative;
923
- display: flex;
924
- vertical-align: middle;
789
+ .tiptap.ProseMirror img:not([data-type=emoji] img).ProseMirror-selectednode {
790
+ outline-color: var(--tt-brand-color-500);
925
791
  }
926
- .tiptap-button-group[data-orientation=vertical] {
927
- flex-direction: column;
928
- align-items: flex-start;
929
- justify-content: center;
930
- min-width: max-content;
792
+ .tiptap.ProseMirror .tiptap-thread:has(> img) {
793
+ margin: 2rem 0;
931
794
  }
932
- .tiptap-button-group[data-orientation=vertical] > .tiptap-button {
933
- width: 100%;
795
+ .tiptap.ProseMirror .tiptap-thread:has(> img) img {
796
+ outline: 0.125rem solid transparent;
797
+ border-radius: var(--tt-radius-xs, 0.25rem);
934
798
  }
935
- .tiptap-button-group[data-orientation=horizontal] {
936
- gap: 0.125rem;
937
- flex-direction: row;
938
- align-items: center;
799
+ .tiptap.ProseMirror .tiptap-thread img {
800
+ margin: 0;
939
801
  }
940
802
 
941
- /* src/components/MarkdownEditor/components/tiptap-ui-primitive/button/button.less */
942
- .tiptap-button {
943
- font-size: 0.875rem;
944
- font-weight: 500;
945
- font-feature-settings: "salt" on, "cv01" on;
946
- line-height: 1.15;
947
- height: 2rem;
948
- min-width: 2rem;
949
- border: none;
950
- padding: 0.5rem;
951
- gap: 0.25rem;
952
- display: flex;
953
- align-items: center;
954
- justify-content: center;
955
- border-radius: var(--tt-radius-lg, 0.75rem);
956
- transition-property:
957
- background,
958
- color,
959
- opacity;
960
- transition-duration: var(--tt-transition-duration-default);
961
- transition-timing-function: var(--tt-transition-easing-default);
962
- }
963
- .tiptap-button:focus-visible {
964
- outline: none;
803
+ /* src/components/MarkdownEditor/components/tiptap-node/list-node/list-node.less */
804
+ .tiptap.ProseMirror {
805
+ --tt-checklist-bg-color: var(--tt-gray-light-a-100);
806
+ --tt-checklist-bg-active-color: var(--tt-gray-light-a-900);
807
+ --tt-checklist-border-color: var(--tt-gray-light-a-200);
808
+ --tt-checklist-border-active-color: var(--tt-gray-light-a-900);
809
+ --tt-checklist-check-icon-color: var(--white);
810
+ --tt-checklist-text-active: var(--tt-gray-light-a-500);
965
811
  }
966
- .tiptap-button[data-highlighted=true],
967
- .tiptap-button[data-focus-visible=true] {
968
- background-color: var(--tt-button-hover-bg-color);
969
- color: var(--tt-button-hover-text-color);
812
+ .dark .tiptap.ProseMirror {
813
+ --tt-checklist-bg-color: var(--tt-gray-dark-a-100);
814
+ --tt-checklist-bg-active-color: var(--tt-gray-dark-a-900);
815
+ --tt-checklist-border-color: var(--tt-gray-dark-a-200);
816
+ --tt-checklist-border-active-color: var(--tt-gray-dark-a-900);
817
+ --tt-checklist-check-icon-color: var(--black);
818
+ --tt-checklist-text-active: var(--tt-gray-dark-a-500);
970
819
  }
971
- .tiptap-button[data-weight=small] {
972
- width: 1.5rem;
973
- min-width: 1.5rem;
974
- padding-right: 0;
975
- padding-left: 0;
820
+ .tiptap.ProseMirror ol,
821
+ .tiptap.ProseMirror ul {
822
+ margin-top: 1.5em;
823
+ margin-bottom: 1.5em;
824
+ padding-left: 1.5em;
976
825
  }
977
- .tiptap-button[data-size=large] {
978
- font-size: 0.9375rem;
979
- height: 2.375rem;
980
- min-width: 2.375rem;
981
- padding: 0.625rem;
826
+ .tiptap.ProseMirror ol:first-child,
827
+ .tiptap.ProseMirror ul:first-child {
828
+ margin-top: 0;
982
829
  }
983
- .tiptap-button[data-size=small] {
984
- font-size: 0.75rem;
985
- line-height: 1.2;
986
- height: 1.5rem;
987
- min-width: 1.5rem;
988
- padding: 0.3125rem;
989
- border-radius: var(--tt-radius-md, 0.5rem);
830
+ .tiptap.ProseMirror ol:last-child,
831
+ .tiptap.ProseMirror ul:last-child {
832
+ margin-bottom: 0;
990
833
  }
991
- .tiptap-button .tiptap-button-text {
992
- padding: 0 0.125rem;
993
- flex-grow: 1;
994
- text-align: left;
995
- line-height: 1.5rem;
834
+ .tiptap.ProseMirror ol ol,
835
+ .tiptap.ProseMirror ul ol,
836
+ .tiptap.ProseMirror ol ul,
837
+ .tiptap.ProseMirror ul ul {
838
+ margin-top: 0;
839
+ margin-bottom: 0;
996
840
  }
997
- .tiptap-button[data-text-trim=on] .tiptap-button-text {
998
- text-overflow: ellipsis;
999
- overflow: hidden;
841
+ .tiptap.ProseMirror li p {
842
+ margin-top: 0;
843
+ line-height: 1.6;
1000
844
  }
1001
- .tiptap-button .tiptap-button-icon,
1002
- .tiptap-button .tiptap-button-icon-sub,
1003
- .tiptap-button .tiptap-button-dropdown-arrows,
1004
- .tiptap-button .tiptap-button-dropdown-small {
1005
- flex-shrink: 0;
845
+ .tiptap.ProseMirror ol {
846
+ list-style: decimal;
1006
847
  }
1007
- .tiptap-button .tiptap-button-icon {
1008
- width: 1rem;
1009
- height: 1rem;
848
+ .tiptap.ProseMirror ol ol {
849
+ list-style: lower-alpha;
1010
850
  }
1011
- .tiptap-button[data-size=large] .tiptap-button-icon {
1012
- width: 1.125rem;
1013
- height: 1.125rem;
851
+ .tiptap.ProseMirror ol ol ol {
852
+ list-style: lower-roman;
1014
853
  }
1015
- .tiptap-button[data-size=small] .tiptap-button-icon {
1016
- width: 0.875rem;
1017
- height: 0.875rem;
854
+ .tiptap.ProseMirror ul:not([data-type=taskList]) {
855
+ list-style: disc;
1018
856
  }
1019
- .tiptap-button .tiptap-button-icon-sub {
1020
- width: 1rem;
1021
- height: 1rem;
857
+ .tiptap.ProseMirror ul:not([data-type=taskList]) ul {
858
+ list-style: circle;
1022
859
  }
1023
- .tiptap-button[data-size=large] .tiptap-button-icon-sub {
1024
- width: 1.125rem;
1025
- height: 1.125rem;
860
+ .tiptap.ProseMirror ul:not([data-type=taskList]) ul ul {
861
+ list-style: square;
1026
862
  }
1027
- .tiptap-button[data-size=small] .tiptap-button-icon-sub {
1028
- width: 0.875rem;
1029
- height: 0.875rem;
863
+ .tiptap.ProseMirror ul[data-type=taskList] {
864
+ padding-left: 0.25em;
1030
865
  }
1031
- .tiptap-button .tiptap-button-dropdown-arrows {
1032
- width: 0.75rem;
1033
- height: 0.75rem;
866
+ .tiptap.ProseMirror ul[data-type=taskList] li {
867
+ display: flex;
868
+ flex-direction: row;
869
+ align-items: flex-start;
1034
870
  }
1035
- .tiptap-button[data-size=large] .tiptap-button-dropdown-arrows {
1036
- width: 0.875rem;
1037
- height: 0.875rem;
871
+ .tiptap.ProseMirror ul[data-type=taskList] li:not(:has(> p:first-child)) {
872
+ list-style-type: none;
1038
873
  }
1039
- .tiptap-button[data-size=small] .tiptap-button-dropdown-arrows {
1040
- width: 0.625rem;
1041
- height: 0.625rem;
874
+ .tiptap.ProseMirror ul[data-type=taskList] li[data-checked=true] > div > p {
875
+ opacity: 0.5;
876
+ text-decoration: line-through;
1042
877
  }
1043
- .tiptap-button .tiptap-button-dropdown-small {
1044
- width: 0.625rem;
1045
- height: 0.625rem;
878
+ .tiptap.ProseMirror ul[data-type=taskList] li[data-checked=true] > div > p span {
879
+ text-decoration: line-through;
1046
880
  }
1047
- .tiptap-button[data-size=large] .tiptap-button-dropdown-small {
1048
- width: 0.75rem;
1049
- height: 0.75rem;
881
+ .tiptap.ProseMirror ul[data-type=taskList] li label {
882
+ position: relative;
883
+ padding-top: 0.375rem;
884
+ padding-right: 0.5rem;
1050
885
  }
1051
- .tiptap-button[data-size=small] .tiptap-button-dropdown-small {
1052
- width: 0.5rem;
1053
- height: 0.5rem;
886
+ .tiptap.ProseMirror ul[data-type=taskList] li label input[type=checkbox] {
887
+ position: absolute;
888
+ opacity: 0;
889
+ width: 0;
890
+ height: 0;
1054
891
  }
1055
- .tiptap-button:has(> svg):not(:has(> :not(svg))) {
1056
- gap: 0.125rem;
892
+ .tiptap.ProseMirror ul[data-type=taskList] li label span {
893
+ display: block;
894
+ width: 1em;
895
+ height: 1em;
896
+ border: 1px solid var(--tt-checklist-border-color);
897
+ border-radius: var(--tt-radius-xs, 0.25rem);
898
+ position: relative;
899
+ cursor: pointer;
900
+ background-color: var(--tt-checklist-bg-color);
901
+ transition: background-color 80ms ease-out, border-color 80ms ease-out;
1057
902
  }
1058
- .tiptap-button:has(> svg):not(:has(> :not(svg)))[data-size=large],
1059
- .tiptap-button:has(> svg):not(:has(> :not(svg)))[data-size=small] {
1060
- gap: 0.125rem;
903
+ .tiptap.ProseMirror ul[data-type=taskList] li label span::before {
904
+ content: "";
905
+ position: absolute;
906
+ left: 50%;
907
+ top: 50%;
908
+ transform: translate(-50%, -50%);
909
+ width: 0.75em;
910
+ height: 0.75em;
911
+ background-color: var(--tt-checklist-check-icon-color);
912
+ opacity: 0;
913
+ -webkit-mask: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21.4142%204.58579C22.1953%205.36683%2022.1953%206.63317%2021.4142%207.41421L10.4142%2018.4142C9.63317%2019.1953%208.36684%2019.1953%207.58579%2018.4142L2.58579%2013.4142C1.80474%2012.6332%201.80474%2011.3668%202.58579%2010.5858C3.36683%209.80474%204.63317%209.80474%205.41421%2010.5858L9%2014.1716L18.5858%204.58579C19.3668%203.80474%2020.6332%203.80474%2021.4142%204.58579Z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E) center / contain no-repeat;
914
+ mask: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21.4142%204.58579C22.1953%205.36683%2022.1953%206.63317%2021.4142%207.41421L10.4142%2018.4142C9.63317%2019.1953%208.36684%2019.1953%207.58579%2018.4142L2.58579%2013.4142C1.80474%2012.6332%201.80474%2011.3668%202.58579%2010.5858C3.36683%209.80474%204.63317%209.80474%205.41421%2010.5858L9%2014.1716L18.5858%204.58579C19.3668%203.80474%2020.6332%203.80474%2021.4142%204.58579Z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E) center / contain no-repeat;
1061
915
  }
1062
- .tiptap-button:has(> svg:nth-of-type(2)):has(> .tiptap-button-dropdown-small):not(:has(> svg:nth-of-type(3))):not(:has(> .tiptap-button-text)) {
1063
- gap: 0;
1064
- padding-right: 0.25rem;
916
+ .tiptap.ProseMirror ul[data-type=taskList] li label input[type=checkbox]:checked + span {
917
+ background: var(--tt-checklist-bg-active-color);
918
+ border-color: var(--tt-checklist-border-active-color);
1065
919
  }
1066
- .tiptap-button:has(> svg:nth-of-type(2)):has(> .tiptap-button-dropdown-small):not(:has(> svg:nth-of-type(3))):not(:has(> .tiptap-button-text))[data-size=large] {
1067
- padding-right: 0.375rem;
920
+ .tiptap.ProseMirror ul[data-type=taskList] li label input[type=checkbox]:checked + span::before {
921
+ opacity: 1;
1068
922
  }
1069
- .tiptap-button:has(> svg:nth-of-type(2)):has(> .tiptap-button-dropdown-small):not(:has(> svg:nth-of-type(3))):not(:has(> .tiptap-button-text))[data-size=small] {
1070
- padding-right: 0.25rem;
923
+ .tiptap.ProseMirror ul[data-type=taskList] li div {
924
+ flex: 1 1 0%;
925
+ min-width: 0;
1071
926
  }
1072
- .tiptap-button .tiptap-button-emoji {
1073
- width: 1rem;
1074
- display: flex;
1075
- justify-content: center;
927
+
928
+ /* src/components/MarkdownEditor/components/tiptap-node/paragraph-node/paragraph-node.less */
929
+ .tiptap.ProseMirror {
930
+ --tt-collaboration-carets-label: var(--tt-gray-light-900);
931
+ --link-text-color: var(--tt-brand-color-500);
932
+ --thread-text: var(--tt-gray-light-900);
933
+ --placeholder-color: var(--tt-gray-light-a-400);
934
+ --thread-bg-color: var(--tt-color-yellow-inc-2);
935
+ --tiptap-ai-insertion-color: var(--tt-brand-color-600);
1076
936
  }
1077
- .tiptap-button[data-size=large] .tiptap-button-emoji {
1078
- width: 1.125rem;
937
+ .dark .tiptap.ProseMirror {
938
+ --tt-collaboration-carets-label: var(--tt-gray-dark-100);
939
+ --link-text-color: var(--tt-brand-color-400);
940
+ --thread-text: var(--tt-gray-dark-900);
941
+ --placeholder-color: var(--tt-gray-dark-a-400);
942
+ --thread-bg-color: var(--tt-color-yellow-dec-2);
943
+ --tiptap-ai-insertion-color: var(--tt-brand-color-400);
1079
944
  }
1080
- .tiptap-button[data-size=small] .tiptap-button-emoji {
1081
- width: 0.875rem;
945
+ .tiptap.ProseMirror > * {
946
+ position: relative;
1082
947
  }
1083
- .tiptap-button {
1084
- background-color: var(--tt-button-default-bg-color);
1085
- color: var(--tt-button-default-text-color);
948
+ .tiptap.ProseMirror {
949
+ white-space: pre-wrap;
950
+ outline: none;
951
+ caret-color: var(--tt-cursor-color);
1086
952
  }
1087
- .tiptap-button .tiptap-button-icon {
1088
- color: var(--tt-button-default-icon-color);
953
+ .tiptap.ProseMirror p:not(:first-child):not(td p):not(th p) {
954
+ font-size: 1rem;
955
+ line-height: 1.6;
956
+ font-weight: normal;
957
+ margin-top: 20px;
1089
958
  }
1090
- .tiptap-button .tiptap-button-icon-sub {
1091
- color: var(--tt-button-default-icon-sub-color);
959
+ .tiptap.ProseMirror:not(.readonly):not(.ProseMirror-hideselection) ::selection {
960
+ background-color: var(--tt-selection-color);
1092
961
  }
1093
- .tiptap-button .tiptap-button-dropdown-arrows {
1094
- color: var(--tt-button-default-dropdown-arrows-color);
962
+ .tiptap.ProseMirror:not(.readonly):not(.ProseMirror-hideselection) .selection::selection {
963
+ background: transparent;
1095
964
  }
1096
- .tiptap-button .tiptap-button-dropdown-small {
1097
- color: var(--tt-button-default-dropdown-arrows-color);
965
+ .tiptap.ProseMirror .selection {
966
+ display: inline;
967
+ background-color: var(--tt-selection-color);
1098
968
  }
1099
- .tiptap-button:hover:not([data-active-item=true]):not([disabled]),
1100
- .tiptap-button[data-active-item=true]:not([disabled]),
1101
- .tiptap-button[data-highlighted]:not([disabled]):not([data-highlighted=false]) {
1102
- background-color: var(--tt-button-hover-bg-color);
1103
- color: var(--tt-button-hover-text-color);
969
+ .tiptap.ProseMirror .ProseMirror-selectednode:not(img):not(pre):not(.react-renderer) {
970
+ border-radius: var(--tt-radius-md);
971
+ background-color: var(--tt-selection-color);
1104
972
  }
1105
- .tiptap-button:hover:not([data-active-item=true]):not([disabled]) .tiptap-button-icon,
1106
- .tiptap-button[data-active-item=true]:not([disabled]) .tiptap-button-icon,
1107
- .tiptap-button[data-highlighted]:not([disabled]):not([data-highlighted=false]) .tiptap-button-icon {
1108
- color: var(--tt-button-hover-icon-color);
973
+ .tiptap.ProseMirror .ProseMirror-hideselection {
974
+ caret-color: transparent;
1109
975
  }
1110
- .tiptap-button:hover:not([data-active-item=true]):not([disabled]) .tiptap-button-icon-sub,
1111
- .tiptap-button[data-active-item=true]:not([disabled]) .tiptap-button-icon-sub,
1112
- .tiptap-button[data-highlighted]:not([disabled]):not([data-highlighted=false]) .tiptap-button-icon-sub {
1113
- color: var(--tt-button-hover-icon-sub-color);
976
+ .tiptap.ProseMirror.resize-cursor {
977
+ cursor: ew-resize;
978
+ cursor: col-resize;
1114
979
  }
1115
- .tiptap-button:hover:not([data-active-item=true]):not([disabled]) .tiptap-button-dropdown-arrows,
1116
- .tiptap-button[data-active-item=true]:not([disabled]) .tiptap-button-dropdown-arrows,
1117
- .tiptap-button[data-highlighted]:not([disabled]):not([data-highlighted=false]) .tiptap-button-dropdown-arrows,
1118
- .tiptap-button:hover:not([data-active-item=true]):not([disabled]) .tiptap-button-dropdown-small,
1119
- .tiptap-button[data-active-item=true]:not([disabled]) .tiptap-button-dropdown-small,
1120
- .tiptap-button[data-highlighted]:not([disabled]):not([data-highlighted=false]) .tiptap-button-dropdown-small {
1121
- color: var(--tt-button-hover-dropdown-arrows-color);
980
+ .tiptap.ProseMirror a span {
981
+ text-decoration: underline;
1122
982
  }
1123
- .tiptap-button[data-active-state=on]:not([disabled]),
1124
- .tiptap-button[data-state=open]:not([disabled]) {
1125
- background-color: var(--tt-button-active-bg-color);
1126
- color: var(--tt-button-active-text-color);
983
+ .tiptap.ProseMirror s span {
984
+ text-decoration: line-through;
1127
985
  }
1128
- .tiptap-button[data-active-state=on]:not([disabled]) .tiptap-button-icon,
1129
- .tiptap-button[data-state=open]:not([disabled]) .tiptap-button-icon {
1130
- color: var(--tt-button-active-icon-color);
986
+ .tiptap.ProseMirror u span {
987
+ text-decoration: underline;
1131
988
  }
1132
- .tiptap-button[data-active-state=on]:not([disabled]) .tiptap-button-icon-sub,
1133
- .tiptap-button[data-state=open]:not([disabled]) .tiptap-button-icon-sub {
1134
- color: var(--tt-button-active-icon-sub-color);
989
+ .tiptap.ProseMirror .tiptap-ai-insertion {
990
+ color: var(--tiptap-ai-insertion-color);
1135
991
  }
1136
- .tiptap-button[data-active-state=on]:not([disabled]) .tiptap-button-dropdown-arrows,
1137
- .tiptap-button[data-state=open]:not([disabled]) .tiptap-button-dropdown-arrows,
1138
- .tiptap-button[data-active-state=on]:not([disabled]) .tiptap-button-dropdown-small,
1139
- .tiptap-button[data-state=open]:not([disabled]) .tiptap-button-dropdown-small {
1140
- color: var(--tt-button-active-dropdown-arrows-color);
992
+ .tiptap.ProseMirror .collaboration-carets__caret {
993
+ border-right: 1px solid transparent;
994
+ border-left: 1px solid transparent;
995
+ pointer-events: none;
996
+ margin-left: -1px;
997
+ margin-right: -1px;
998
+ position: relative;
999
+ word-break: normal;
1141
1000
  }
1142
- .tiptap-button[data-active-state=on]:not([disabled]):hover,
1143
- .tiptap-button[data-state=open]:not([disabled]):hover {
1144
- background-color: var(--tt-button-active-hover-bg-color);
1001
+ .tiptap.ProseMirror .collaboration-carets__label {
1002
+ color: var(--tt-collaboration-carets-label);
1003
+ border-radius: 0.25rem;
1004
+ border-bottom-left-radius: 0;
1005
+ font-size: 0.75rem;
1006
+ font-weight: 600;
1007
+ left: -1px;
1008
+ line-height: 1;
1009
+ padding: 0.125rem 0.375rem;
1010
+ position: absolute;
1011
+ top: -1.3em;
1012
+ user-select: none;
1013
+ white-space: nowrap;
1145
1014
  }
1146
- .tiptap-button[data-active-state=on]:not([disabled])[data-appearance=emphasized],
1147
- .tiptap-button[data-state=open]:not([disabled])[data-appearance=emphasized] {
1148
- background-color: var(--tt-button-active-bg-color-emphasized);
1149
- color: var(--tt-button-active-text-color-emphasized);
1015
+ .tiptap.ProseMirror [data-type=emoji] img {
1016
+ display: inline-block;
1017
+ width: 1.25em;
1018
+ height: 1.25em;
1019
+ cursor: text;
1150
1020
  }
1151
- .tiptap-button[data-active-state=on]:not([disabled])[data-appearance=emphasized] .tiptap-button-icon,
1152
- .tiptap-button[data-state=open]:not([disabled])[data-appearance=emphasized] .tiptap-button-icon {
1153
- color: var(--tt-button-active-icon-color-emphasized);
1021
+ .tiptap.ProseMirror a {
1022
+ color: var(--link-text-color);
1023
+ text-decoration: underline;
1154
1024
  }
1155
- .tiptap-button[data-active-state=on]:not([disabled])[data-appearance=emphasized] .tiptap-button-icon-sub,
1156
- .tiptap-button[data-state=open]:not([disabled])[data-appearance=emphasized] .tiptap-button-icon-sub {
1157
- color: var(--tt-button-active-icon-sub-color-emphasized);
1025
+ .tiptap.ProseMirror [data-type=mention] {
1026
+ display: inline-block;
1027
+ color: var(--tt-brand-color-500);
1158
1028
  }
1159
- .tiptap-button[data-active-state=on]:not([disabled])[data-appearance=emphasized] .tiptap-button-dropdown-arrows,
1160
- .tiptap-button[data-state=open]:not([disabled])[data-appearance=emphasized] .tiptap-button-dropdown-arrows,
1161
- .tiptap-button[data-active-state=on]:not([disabled])[data-appearance=emphasized] .tiptap-button-dropdown-small,
1162
- .tiptap-button[data-state=open]:not([disabled])[data-appearance=emphasized] .tiptap-button-dropdown-small {
1163
- color: var(--tt-button-active-dropdown-arrows-color-emphasized);
1029
+ .tiptap.ProseMirror .tiptap-thread.tiptap-thread--unresolved.tiptap-thread--inline {
1030
+ transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
1031
+ color: var(--thread-text);
1032
+ border-bottom: 2px dashed var(--tt-color-yellow-base);
1033
+ font-weight: 600;
1164
1034
  }
1165
- .tiptap-button[data-active-state=on]:not([disabled])[data-appearance=emphasized]:hover,
1166
- .tiptap-button[data-state=open]:not([disabled])[data-appearance=emphasized]:hover {
1167
- background-color: var(--tt-button-active-hover-bg-color-emphasized);
1035
+ .tiptap.ProseMirror .tiptap-thread.tiptap-thread--unresolved.tiptap-thread--inline.tiptap-thread--selected,
1036
+ .tiptap.ProseMirror .tiptap-thread.tiptap-thread--unresolved.tiptap-thread--inline.tiptap-thread--hovered {
1037
+ background-color: var(--thread-bg-color);
1038
+ border-bottom-color: transparent;
1168
1039
  }
1169
- .tiptap-button[data-active-state=on]:not([disabled])[data-appearance=subdued],
1170
- .tiptap-button[data-state=open]:not([disabled])[data-appearance=subdued] {
1171
- background-color: var(--tt-button-active-bg-color-subdued);
1172
- color: var(--tt-button-active-text-color-subdued);
1040
+ .tiptap.ProseMirror .tiptap-thread.tiptap-thread--unresolved.tiptap-thread--block:has(img) {
1041
+ outline: 0.125rem solid var(--tt-color-yellow-base);
1042
+ border-radius: var(--tt-radius-xs, 0.25rem);
1043
+ overflow: hidden;
1044
+ width: fit-content;
1173
1045
  }
1174
- .tiptap-button[data-active-state=on]:not([disabled])[data-appearance=subdued] .tiptap-button-icon,
1175
- .tiptap-button[data-state=open]:not([disabled])[data-appearance=subdued] .tiptap-button-icon {
1176
- color: var(--tt-button-active-icon-color-subdued);
1046
+ .tiptap.ProseMirror .tiptap-thread.tiptap-thread--unresolved.tiptap-thread--block:has(img).tiptap-thread--selected {
1047
+ outline-width: 0.25rem;
1048
+ outline-color: var(--tt-color-yellow-base);
1177
1049
  }
1178
- .tiptap-button[data-active-state=on]:not([disabled])[data-appearance=subdued] .tiptap-button-icon-sub,
1179
- .tiptap-button[data-state=open]:not([disabled])[data-appearance=subdued] .tiptap-button-icon-sub {
1180
- color: var(--tt-button-active-icon-sub-color-subdued);
1050
+ .tiptap.ProseMirror .tiptap-thread.tiptap-thread--unresolved.tiptap-thread--block:has(img).tiptap-thread--hovered {
1051
+ outline-width: 0.25rem;
1181
1052
  }
1182
- .tiptap-button[data-active-state=on]:not([disabled])[data-appearance=subdued] .tiptap-button-dropdown-arrows,
1183
- .tiptap-button[data-state=open]:not([disabled])[data-appearance=subdued] .tiptap-button-dropdown-arrows,
1184
- .tiptap-button[data-active-state=on]:not([disabled])[data-appearance=subdued] .tiptap-button-dropdown-small,
1185
- .tiptap-button[data-state=open]:not([disabled])[data-appearance=subdued] .tiptap-button-dropdown-small {
1186
- color: var(--tt-button-active-dropdown-arrows-color-subdued);
1053
+ .tiptap.ProseMirror .tiptap-thread.tiptap-thread--unresolved.tiptap-thread--block:not(:has(img)) {
1054
+ border-radius: 0.25rem;
1055
+ border-bottom: 0.125rem dashed var(--tt-color-yellow-base);
1056
+ border-top: 0.125rem dashed var(--tt-color-yellow-base);
1057
+ outline: 0.25rem solid transparent;
1187
1058
  }
1188
- .tiptap-button[data-active-state=on]:not([disabled])[data-appearance=subdued]:hover,
1189
- .tiptap-button[data-state=open]:not([disabled])[data-appearance=subdued]:hover {
1190
- background-color: var(--tt-button-active-hover-bg-color-subdued);
1059
+ .tiptap.ProseMirror .tiptap-thread.tiptap-thread--unresolved.tiptap-thread--block:not(:has(img)).tiptap-thread--hovered,
1060
+ .tiptap.ProseMirror .tiptap-thread.tiptap-thread--unresolved.tiptap-thread--block:not(:has(img)).tiptap-thread--selected {
1061
+ background-color: var(--tt-color-yellow-base);
1062
+ outline-color: var(--tt-color-yellow-base);
1191
1063
  }
1192
- .tiptap-button[data-active-state=on]:not([disabled])[data-appearance=subdued]:hover .tiptap-button-icon,
1193
- .tiptap-button[data-state=open]:not([disabled])[data-appearance=subdued]:hover .tiptap-button-icon {
1194
- color: var(--tt-button-active-icon-color-subdued);
1064
+ .tiptap.ProseMirror .tiptap-thread.tiptap-thread--resolved.tiptap-thread--inline.tiptap-thread--selected {
1065
+ background-color: var(--tt-color-yellow-base);
1066
+ border-color: transparent;
1067
+ opacity: 0.5;
1195
1068
  }
1196
- .tiptap-button:disabled {
1197
- background-color: var(--tt-button-disabled-bg-color);
1198
- color: var(--tt-button-disabled-text-color);
1069
+ .tiptap.ProseMirror .tiptap-thread.tiptap-thread--block:has(.react-renderer) {
1070
+ margin-top: 3rem;
1071
+ margin-bottom: 3rem;
1199
1072
  }
1200
- .tiptap-button:disabled .tiptap-button-icon {
1201
- color: var(--tt-button-disabled-icon-color);
1073
+ .is-empty:not(.with-slash)[data-placeholder]:has(> .ProseMirror-trailingBreak:only-child)::before {
1074
+ content: attr(data-placeholder);
1202
1075
  }
1203
-
1204
- /* src/components/MarkdownEditor/components/tiptap-ui-primitive/separator/separator.less */
1205
- .tiptap-separator {
1206
- --tt-link-border-color: var(--tt-gray-light-a-200);
1076
+ .is-empty.with-slash[data-placeholder]:has(> .ProseMirror-trailingBreak:only-child)::before {
1077
+ content: "\5f00\59cb\5199\4f5c\ff0c\8f93\5165'/'\67e5\770b\547d\4ee4\2026";
1078
+ font-style: italic;
1207
1079
  }
1208
- .dark .tiptap-separator {
1209
- --tt-link-border-color: var(--tt-gray-dark-a-200);
1080
+ .is-empty[data-placeholder]:has(> .ProseMirror-trailingBreak:only-child):before {
1081
+ pointer-events: none;
1082
+ height: 0;
1083
+ position: absolute;
1084
+ width: 100%;
1085
+ text-align: inherit;
1086
+ left: 0;
1087
+ right: 0;
1210
1088
  }
1211
- .tiptap-separator {
1212
- flex-shrink: 0;
1213
- background-color: var(--tt-link-border-color);
1089
+ .is-empty[data-placeholder]:has(> .ProseMirror-trailingBreak):before {
1090
+ color: var(--placeholder-color);
1214
1091
  }
1215
- .tiptap-separator[data-orientation=horizontal] {
1216
- height: 1px;
1092
+ .prosemirror-dropcursor-block,
1093
+ .prosemirror-dropcursor-inline {
1094
+ background: var(--tt-brand-color-400) !important;
1095
+ border-radius: 0.25rem;
1096
+ margin-left: -1px;
1097
+ margin-right: -1px;
1217
1098
  width: 100%;
1218
- margin: 0.5rem 0;
1219
- }
1220
- .tiptap-separator[data-orientation=vertical] {
1221
- height: 1.5rem;
1222
- width: 1px;
1099
+ height: 0.188rem;
1100
+ cursor: grabbing;
1223
1101
  }
1224
1102
 
1225
- /* src/components/MarkdownEditor/components/tiptap-ui-primitive/toolbar/toolbar.less */
1226
- :root {
1227
- --tt-toolbar-height: 2.75rem;
1228
- --tt-safe-area-bottom: env(safe-area-inset-bottom, 0px);
1229
- --tt-toolbar-bg-color: var(--white);
1230
- --tt-toolbar-border-color: var(--tt-gray-light-a-100);
1103
+ /* src/components/MarkdownEditor/annotation/styles.module.less */
1104
+ .styles_module_annotations {
1105
+ margin-top: 8px;
1231
1106
  }
1232
- .dark {
1233
- --tt-toolbar-bg-color: var(--black);
1234
- --tt-toolbar-border-color: var(--tt-gray-dark-a-50);
1107
+ .styles_module_annotations .styles_module_annotationItem {
1108
+ cursor: pointer;
1109
+ padding-left: 20px;
1110
+ padding-right: 20px;
1235
1111
  }
1236
- .tiptap-toolbar {
1237
- display: flex;
1238
- align-items: center;
1239
- gap: 0.25rem;
1112
+ .styles_module_annotations .styles_module_annotationItem:hover {
1113
+ background-color: #fafafa;
1240
1114
  }
1241
- .tiptap-toolbar-group {
1242
- display: flex;
1243
- align-items: center;
1244
- gap: 0.125rem;
1115
+ .styles_module_annotations .styles_module_annotationItem.styles_module_annotationItemSelected {
1116
+ background-color: #e6f7ff;
1117
+ border-left: 3px solid var(--ant-primary-color);
1245
1118
  }
1246
- .tiptap-toolbar-group:empty {
1247
- display: none;
1119
+
1120
+ /* src/components/MarkdownEditor/collection/styles.module.less */
1121
+ .styles_module_collections {
1122
+ margin-top: 8px;
1248
1123
  }
1249
- .tiptap-toolbar-group:empty + .tiptap-separator,
1250
- .tiptap-separator + .tiptap-toolbar-group:empty {
1251
- display: none;
1124
+ .styles_module_collections .styles_module_collectionItem {
1125
+ cursor: pointer;
1126
+ padding-left: 20px;
1127
+ padding-right: 20px;
1252
1128
  }
1253
- .tiptap-toolbar[data-variant=fixed] {
1254
- position: sticky;
1255
- top: 0;
1256
- z-index: 10;
1257
- width: 100%;
1258
- min-height: var(--tt-toolbar-height);
1259
- background: var(--tt-toolbar-bg-color);
1260
- border-bottom: 1px solid var(--tt-toolbar-border-color);
1261
- padding: 0 0.5rem;
1262
- overflow-x: auto;
1263
- overscroll-behavior-x: contain;
1264
- -webkit-overflow-scrolling: touch;
1265
- scrollbar-width: none;
1266
- -ms-overflow-style: none;
1129
+ .styles_module_collections .styles_module_collectionItem:hover {
1130
+ background-color: #fafafa;
1267
1131
  }
1268
- .tiptap-toolbar[data-variant=fixed]::-webkit-scrollbar {
1269
- display: none;
1132
+ .styles_module_collections .styles_module_collectionItem.styles_module_collectionItemSelected {
1133
+ background-color: #e6f7ff;
1134
+ border-left: 3px solid var(--ant-primary-color);
1270
1135
  }
1271
- @media (max-width: 480px) {
1272
- .tiptap-toolbar[data-variant=fixed] {
1273
- position: absolute;
1274
- top: auto;
1275
- height: calc(var(--tt-toolbar-height) + var(--tt-safe-area-bottom));
1276
- border-top: 1px solid var(--tt-toolbar-border-color);
1277
- border-bottom: none;
1278
- padding: 0 0.5rem var(--tt-safe-area-bottom);
1279
- flex-wrap: nowrap;
1280
- justify-content: flex-start;
1281
- }
1282
- .tiptap-toolbar[data-variant=fixed] .tiptap-toolbar-group {
1283
- flex: 0 0 auto;
1284
- }
1136
+
1137
+ /* src/components/MarkdownEditor/components/tiptap-ui-primitive/tooltip/tooltip.less */
1138
+ .tiptap-tooltip {
1139
+ --tt-tooltip-bg: var(--tt-gray-light-900);
1140
+ --tt-tooltip-text: var(--white);
1141
+ --tt-kbd: var(--tt-gray-dark-a-400);
1285
1142
  }
1286
- .tiptap-toolbar[data-variant=floating] {
1287
- --tt-toolbar-padding: 0.125rem;
1288
- --tt-toolbar-border-width: 1px;
1289
- padding: 0.188rem;
1290
- border-radius: calc(var(--tt-toolbar-padding) + var(--tt-radius-lg) + var(--tt-toolbar-border-width));
1291
- border: var(--tt-toolbar-border-width) solid var(--tt-toolbar-border-color);
1292
- background-color: var(--tt-toolbar-bg-color);
1293
- box-shadow: var(--tt-shadow-elevated-md);
1294
- outline: none;
1295
- overflow: hidden;
1143
+ .dark .tiptap-tooltip {
1144
+ --tt-tooltip-bg: var(--white);
1145
+ --tt-tooltip-text: var(--tt-gray-light-600);
1146
+ --tt-kbd: var(--tt-gray-light-a-400);
1296
1147
  }
1297
- .tiptap-toolbar[data-variant=floating][data-plain=true] {
1298
- padding: 0;
1299
- border-radius: 0;
1300
- border: none;
1301
- box-shadow: none;
1302
- background-color: transparent;
1148
+ .tiptap-tooltip {
1149
+ z-index: 200;
1150
+ overflow: hidden;
1151
+ border-radius: var(--tt-radius-md, 0.375rem);
1152
+ background-color: var(--tt-tooltip-bg);
1153
+ padding: 0.375rem 0.5rem;
1154
+ font-size: 0.75rem;
1155
+ font-weight: 500;
1156
+ color: var(--tt-tooltip-text);
1157
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
1158
+ text-align: center;
1303
1159
  }
1304
- @media screen and (max-width: 480px) {
1305
- .tiptap-toolbar[data-variant=floating] {
1306
- width: 100%;
1307
- border-radius: 0;
1308
- border: none;
1309
- box-shadow: none;
1310
- }
1160
+ .tiptap-tooltip kbd {
1161
+ display: inline-block;
1162
+ text-align: center;
1163
+ vertical-align: baseline;
1164
+ font-family:
1165
+ ui-sans-serif,
1166
+ system-ui,
1167
+ -apple-system,
1168
+ BlinkMacSystemFont,
1169
+ "Segoe UI",
1170
+ Roboto,
1171
+ "Helvetica Neue",
1172
+ Arial,
1173
+ "Noto Sans",
1174
+ sans-serif;
1175
+ text-transform: capitalize;
1176
+ color: var(--tt-kbd);
1311
1177
  }
1312
1178
 
1313
- /* src/components/MarkdownEditor/components/tiptap-node/blockquote-node/blockquote-node.less */
1314
- .tiptap.ProseMirror {
1315
- --blockquote-bg-color: var(--tt-gray-light-900);
1316
- }
1317
- .dark .tiptap.ProseMirror {
1318
- --blockquote-bg-color: var(--tt-gray-dark-900);
1319
- }
1320
- .tiptap.ProseMirror blockquote {
1321
- position: relative;
1322
- padding-left: 1em;
1323
- padding-top: 0.375em;
1324
- padding-bottom: 0.375em;
1325
- margin: 1.5rem 0;
1179
+ /* src/components/MarkdownEditor/components/tiptap-ui-primitive/button/button-colors.less */
1180
+ .tiptap-button {
1181
+ --tt-button-default-bg-color: var(--tt-gray-light-a-100);
1182
+ --tt-button-hover-bg-color: var(--tt-gray-light-200);
1183
+ --tt-button-active-bg-color: var(--tt-gray-light-a-200);
1184
+ --tt-button-active-bg-color-emphasized: var(--tt-brand-color-100);
1185
+ --tt-button-active-bg-color-subdued: var(--tt-gray-light-a-200);
1186
+ --tt-button-active-hover-bg-color: var(--tt-gray-light-300);
1187
+ --tt-button-active-hover-bg-color-emphasized: var(--tt-brand-color-200);
1188
+ --tt-button-active-hover-bg-color-subdued: var(--tt-gray-light-a-300);
1189
+ --tt-button-disabled-bg-color: var(--tt-gray-light-a-50);
1190
+ --tt-button-default-text-color: var(--tt-gray-light-a-600);
1191
+ --tt-button-hover-text-color: var(--tt-gray-light-a-900);
1192
+ --tt-button-active-text-color: var(--tt-gray-light-a-900);
1193
+ --tt-button-active-text-color-emphasized: var(--tt-gray-light-a-900);
1194
+ --tt-button-active-text-color-subdued: var(--tt-gray-light-a-900);
1195
+ --tt-button-disabled-text-color: var(--tt-gray-light-a-400);
1196
+ --tt-button-default-icon-color: var(--tt-gray-light-a-600);
1197
+ --tt-button-hover-icon-color: var(--tt-gray-light-a-900);
1198
+ --tt-button-active-icon-color: var(--tt-brand-color-500);
1199
+ --tt-button-active-icon-color-emphasized: var(--tt-brand-color-600);
1200
+ --tt-button-active-icon-color-subdued: var(--tt-gray-light-a-900);
1201
+ --tt-button-disabled-icon-color: var(--tt-gray-light-a-400);
1202
+ --tt-button-default-icon-sub-color: var(--tt-gray-light-a-400);
1203
+ --tt-button-hover-icon-sub-color: var(--tt-gray-light-a-500);
1204
+ --tt-button-active-icon-sub-color: var(--tt-gray-light-a-400);
1205
+ --tt-button-active-icon-sub-color-emphasized: var(--tt-gray-light-a-500);
1206
+ --tt-button-active-icon-sub-color-subdued: var(--tt-gray-light-a-400);
1207
+ --tt-button-disabled-icon-sub-color: var(--tt-gray-light-a-100);
1208
+ --tt-button-default-dropdown-arrows-color: var(--tt-gray-light-a-600);
1209
+ --tt-button-hover-dropdown-arrows-color: var(--tt-gray-light-a-700);
1210
+ --tt-button-active-dropdown-arrows-color: var(--tt-gray-light-a-600);
1211
+ --tt-button-active-dropdown-arrows-color-emphasized: var(--tt-gray-light-a-700);
1212
+ --tt-button-active-dropdown-arrows-color-subdued: var(--tt-gray-light-a-600);
1213
+ --tt-button-disabled-dropdown-arrows-color: var(--tt-gray-light-a-400);
1326
1214
  }
1327
- .tiptap.ProseMirror blockquote p {
1328
- margin-top: 0;
1215
+ .dark .tiptap-button {
1216
+ --tt-button-default-bg-color: var(--tt-gray-dark-a-100);
1217
+ --tt-button-hover-bg-color: var(--tt-gray-dark-200);
1218
+ --tt-button-active-bg-color: var(--tt-gray-dark-a-200);
1219
+ --tt-button-active-bg-color-emphasized: var(--tt-brand-color-900);
1220
+ --tt-button-active-bg-color-subdued: var(--tt-gray-dark-a-200);
1221
+ --tt-button-active-hover-bg-color: var(--tt-gray-dark-300);
1222
+ --tt-button-active-hover-bg-color-emphasized: var(--tt-brand-color-800);
1223
+ --tt-button-active-hover-bg-color-subdued: var(--tt-gray-dark-a-300);
1224
+ --tt-button-disabled-bg-color: var(--tt-gray-dark-a-50);
1329
1225
  }
1330
- .tiptap.ProseMirror blockquote::before,
1331
- .tiptap.ProseMirror blockquote.is-empty::before {
1332
- position: absolute;
1333
- bottom: 0;
1334
- left: 0;
1335
- top: 0;
1336
- height: 100%;
1337
- width: 0.25em;
1338
- background-color: var(--blockquote-bg-color);
1339
- content: "";
1340
- border-radius: 0;
1226
+ .dark .tiptap-button {
1227
+ --tt-button-default-text-color: var(--tt-gray-dark-a-600);
1228
+ --tt-button-hover-text-color: var(--tt-gray-dark-a-900);
1229
+ --tt-button-active-text-color: var(--tt-gray-dark-a-900);
1230
+ --tt-button-active-text-color-emphasized: var(--tt-gray-dark-a-900);
1231
+ --tt-button-active-text-color-subdued: var(--tt-gray-dark-a-900);
1232
+ --tt-button-disabled-text-color: var(--tt-gray-dark-a-300);
1341
1233
  }
1342
-
1343
- /* src/components/MarkdownEditor/components/tiptap-node/code-block-node/code-block-node.less */
1344
- .tiptap.ProseMirror {
1345
- --tt-inline-code-bg-color: var(--tt-gray-light-a-100);
1346
- --tt-inline-code-text-color: var(--tt-gray-light-a-700);
1347
- --tt-inline-code-border-color: var(--tt-gray-light-a-200);
1348
- --tt-codeblock-bg: var(--tt-gray-light-a-50);
1349
- --tt-codeblock-text: var(--tt-gray-light-a-800);
1350
- --tt-codeblock-border: var(--tt-gray-light-a-200);
1234
+ .dark .tiptap-button {
1235
+ --tt-button-default-icon-color: var(--tt-gray-dark-a-600);
1236
+ --tt-button-hover-icon-color: var(--tt-gray-dark-a-900);
1237
+ --tt-button-active-icon-color: var(--tt-brand-color-400);
1238
+ --tt-button-active-icon-color-emphasized: var(--tt-brand-color-400);
1239
+ --tt-button-active-icon-color-subdued: var(--tt-gray-dark-a-900);
1240
+ --tt-button-disabled-icon-color: var(--tt-gray-dark-a-400);
1351
1241
  }
1352
- .dark .tiptap.ProseMirror {
1353
- --tt-inline-code-bg-color: var(--tt-gray-dark-a-100);
1354
- --tt-inline-code-text-color: var(--tt-gray-dark-a-700);
1355
- --tt-inline-code-border-color: var(--tt-gray-dark-a-200);
1356
- --tt-codeblock-bg: var(--tt-gray-dark-a-50);
1357
- --tt-codeblock-text: var(--tt-gray-dark-a-800);
1358
- --tt-codeblock-border: var(--tt-gray-dark-a-200);
1242
+ .dark .tiptap-button {
1243
+ --tt-button-default-icon-sub-color: var(--tt-gray-dark-a-300);
1244
+ --tt-button-hover-icon-sub-color: var(--tt-gray-dark-a-400);
1245
+ --tt-button-active-icon-sub-color: var(--tt-gray-dark-a-300);
1246
+ --tt-button-active-icon-sub-color-emphasized: var(--tt-gray-dark-a-400);
1247
+ --tt-button-active-icon-sub-color-subdued: var(--tt-gray-dark-a-300);
1248
+ --tt-button-disabled-icon-sub-color: var(--tt-gray-dark-a-100);
1359
1249
  }
1360
- .tiptap.ProseMirror code {
1361
- background-color: var(--tt-inline-code-bg-color);
1362
- color: var(--tt-inline-code-text-color);
1363
- border: 1px solid var(--tt-inline-code-border-color);
1364
- font-family: "JetBrains Mono NL", monospace;
1365
- font-size: 0.875em;
1366
- line-height: 1.4;
1367
- border-radius: 6px/0.375rem;
1368
- padding: 0.1em 0.2em;
1250
+ .dark .tiptap-button {
1251
+ --tt-button-default-dropdown-arrows-color: var(--tt-gray-dark-a-600);
1252
+ --tt-button-hover-dropdown-arrows-color: var(--tt-gray-dark-a-700);
1253
+ --tt-button-active-dropdown-arrows-color: var(--tt-gray-dark-a-600);
1254
+ --tt-button-active-dropdown-arrows-color-emphasized: var(--tt-gray-dark-a-700);
1255
+ --tt-button-active-dropdown-arrows-color-subdued: var(--tt-gray-dark-a-600);
1256
+ --tt-button-disabled-dropdown-arrows-color: var(--tt-gray-dark-a-400);
1369
1257
  }
1370
- .tiptap.ProseMirror pre {
1371
- background-color: var(--tt-codeblock-bg);
1372
- color: var(--tt-codeblock-text);
1373
- border: 1px solid var(--tt-codeblock-border);
1374
- margin-top: 1.5em;
1375
- margin-bottom: 1.5em;
1376
- padding: 1em;
1377
- font-size: 1rem;
1378
- border-radius: 6px/0.375rem;
1258
+ .tiptap-button[data-style=ghost] {
1259
+ --tt-button-default-bg-color: var(--transparent);
1260
+ --tt-button-hover-bg-color: var(--tt-gray-light-200);
1261
+ --tt-button-active-bg-color: var(--tt-gray-light-a-100);
1262
+ --tt-button-active-bg-color-emphasized: var(--tt-brand-color-100);
1263
+ --tt-button-active-bg-color-subdued: var(--tt-gray-light-a-100);
1264
+ --tt-button-active-hover-bg-color: var(--tt-gray-light-200);
1265
+ --tt-button-active-hover-bg-color-emphasized: var(--tt-brand-color-200);
1266
+ --tt-button-active-hover-bg-color-subdued: var(--tt-gray-light-a-200);
1267
+ --tt-button-disabled-bg-color: var(--transparent);
1268
+ --tt-button-default-text-color: var(--tt-gray-light-a-600);
1269
+ --tt-button-hover-text-color: var(--tt-gray-light-a-900);
1270
+ --tt-button-active-text-color: var(--tt-gray-light-a-900);
1271
+ --tt-button-active-text-color-emphasized: var(--tt-gray-light-a-900);
1272
+ --tt-button-active-text-color-subdued: var(--tt-gray-light-a-900);
1273
+ --tt-button-disabled-text-color: var(--tt-gray-light-a-400);
1274
+ --tt-button-default-icon-color: var(--tt-gray-light-a-600);
1275
+ --tt-button-hover-icon-color: var(--tt-gray-light-a-900);
1276
+ --tt-button-active-icon-color: var(--tt-brand-color-500);
1277
+ --tt-button-active-icon-color-emphasized: var(--tt-brand-color-600);
1278
+ --tt-button-active-icon-color-subdued: var(--tt-gray-light-a-900);
1279
+ --tt-button-disabled-icon-color: var(--tt-gray-light-a-400);
1280
+ --tt-button-default-icon-sub-color: var(--tt-gray-light-a-400);
1281
+ --tt-button-hover-icon-sub-color: var(--tt-gray-light-a-500);
1282
+ --tt-button-active-icon-sub-color: var(--tt-gray-light-a-400);
1283
+ --tt-button-active-icon-sub-color-emphasized: var(--tt-gray-light-a-500);
1284
+ --tt-button-active-icon-sub-color-subdued: var(--tt-gray-light-a-400);
1285
+ --tt-button-disabled-icon-sub-color: var(--tt-gray-light-a-100);
1286
+ --tt-button-default-dropdown-arrows-color: var(--tt-gray-light-a-600);
1287
+ --tt-button-hover-dropdown-arrows-color: var(--tt-gray-light-a-700);
1288
+ --tt-button-active-dropdown-arrows-color: var(--tt-gray-light-a-600);
1289
+ --tt-button-active-dropdown-arrows-color-emphasized: var(--tt-gray-light-a-700);
1290
+ --tt-button-active-dropdown-arrows-color-subdued: var(--tt-gray-light-a-600);
1291
+ --tt-button-disabled-dropdown-arrows-color: var(--tt-gray-light-a-400);
1379
1292
  }
1380
- .tiptap.ProseMirror pre code {
1381
- background-color: transparent;
1382
- border: none;
1383
- border-radius: 0;
1384
- -webkit-text-fill-color: inherit;
1385
- color: inherit;
1293
+ .dark .tiptap-button[data-style=ghost] {
1294
+ --tt-button-default-bg-color: var(--transparent);
1295
+ --tt-button-hover-bg-color: var(--tt-gray-dark-200);
1296
+ --tt-button-active-bg-color: var(--tt-gray-dark-a-100);
1297
+ --tt-button-active-bg-color-emphasized: var(--tt-brand-color-900);
1298
+ --tt-button-active-bg-color-subdued: var(--tt-gray-dark-a-100);
1299
+ --tt-button-active-hover-bg-color: var(--tt-gray-dark-200);
1300
+ --tt-button-active-hover-bg-color-emphasized: var(--tt-brand-color-800);
1301
+ --tt-button-active-hover-bg-color-subdued: var(--tt-gray-dark-a-200);
1302
+ --tt-button-disabled-bg-color: var(--transparent);
1386
1303
  }
1387
-
1388
- /* src/components/MarkdownEditor/components/tiptap-node/heading-node/heading-node.less */
1389
- .tiptap.ProseMirror h1,
1390
- .tiptap.ProseMirror h2,
1391
- .tiptap.ProseMirror h3,
1392
- .tiptap.ProseMirror h4 {
1393
- position: relative;
1394
- color: inherit;
1395
- font-style: inherit;
1304
+ .dark .tiptap-button[data-style=ghost] {
1305
+ --tt-button-default-text-color: var(--tt-gray-dark-a-600);
1306
+ --tt-button-hover-text-color: var(--tt-gray-dark-a-900);
1307
+ --tt-button-active-text-color: var(--tt-gray-dark-a-900);
1308
+ --tt-button-active-text-color-emphasized: var(--tt-gray-dark-a-900);
1309
+ --tt-button-active-text-color-subdued: var(--tt-gray-dark-a-900);
1310
+ --tt-button-disabled-text-color: var(--tt-gray-dark-a-300);
1396
1311
  }
1397
- .tiptap.ProseMirror h1:first-child,
1398
- .tiptap.ProseMirror h2:first-child,
1399
- .tiptap.ProseMirror h3:first-child,
1400
- .tiptap.ProseMirror h4:first-child,
1401
- .tiptap.ProseMirror h1:first-of-type,
1402
- .tiptap.ProseMirror h2:first-of-type,
1403
- .tiptap.ProseMirror h3:first-of-type,
1404
- .tiptap.ProseMirror h4:first-of-type {
1405
- margin-top: 0;
1312
+ .dark .tiptap-button[data-style=ghost] {
1313
+ --tt-button-default-icon-color: var(--tt-gray-dark-a-600);
1314
+ --tt-button-hover-icon-color: var(--tt-gray-dark-a-900);
1315
+ --tt-button-active-icon-color: var(--tt-brand-color-400);
1316
+ --tt-button-active-icon-color-emphasized: var(--tt-brand-color-300);
1317
+ --tt-button-active-icon-color-subdued: var(--tt-gray-dark-a-900);
1318
+ --tt-button-disabled-icon-color: var(--tt-gray-dark-a-400);
1406
1319
  }
1407
- .tiptap.ProseMirror h1 {
1408
- font-size: 1.5em;
1409
- font-weight: 700;
1410
- margin-top: 3em;
1320
+ .dark .tiptap-button[data-style=ghost] {
1321
+ --tt-button-default-icon-sub-color: var(--tt-gray-dark-a-300);
1322
+ --tt-button-hover-icon-sub-color: var(--tt-gray-dark-a-400);
1323
+ --tt-button-active-icon-sub-color: var(--tt-gray-dark-a-300);
1324
+ --tt-button-active-icon-sub-color-emphasized: var(--tt-gray-dark-a-400);
1325
+ --tt-button-active-icon-sub-color-subdued: var(--tt-gray-dark-a-300);
1326
+ --tt-button-disabled-icon-sub-color: var(--tt-gray-dark-a-100);
1411
1327
  }
1412
- .tiptap.ProseMirror h2 {
1413
- font-size: 1.25em;
1414
- font-weight: 700;
1415
- margin-top: 2.5em;
1328
+ .dark .tiptap-button[data-style=ghost] {
1329
+ --tt-button-default-dropdown-arrows-color: var(--tt-gray-dark-a-600);
1330
+ --tt-button-hover-dropdown-arrows-color: var(--tt-gray-dark-a-700);
1331
+ --tt-button-active-dropdown-arrows-color: var(--tt-gray-dark-a-600);
1332
+ --tt-button-active-dropdown-arrows-color-emphasized: var(--tt-gray-dark-a-700);
1333
+ --tt-button-active-dropdown-arrows-color-subdued: var(--tt-gray-dark-a-600);
1334
+ --tt-button-disabled-dropdown-arrows-color: var(--tt-gray-dark-a-400);
1416
1335
  }
1417
- .tiptap.ProseMirror h3 {
1418
- font-size: 1.125em;
1419
- font-weight: 600;
1420
- margin-top: 2em;
1336
+ .tiptap-button[data-style=primary] {
1337
+ --tt-button-default-bg-color: var(--tt-brand-color-500);
1338
+ --tt-button-hover-bg-color: var(--tt-brand-color-600);
1339
+ --tt-button-active-bg-color: var(--tt-brand-color-100);
1340
+ --tt-button-active-bg-color-emphasized: var(--tt-brand-color-100);
1341
+ --tt-button-active-bg-color-subdued: var(--tt-brand-color-100);
1342
+ --tt-button-active-hover-bg-color: var(--tt-brand-color-200);
1343
+ --tt-button-active-hover-bg-color-emphasized: var(--tt-brand-color-200);
1344
+ --tt-button-active-hover-bg-color-subdued: var(--tt-brand-color-200);
1345
+ --tt-button-disabled-bg-color: var(--tt-gray-light-a-100);
1346
+ --tt-button-default-text-color: var(--white);
1347
+ --tt-button-hover-text-color: var(--white);
1348
+ --tt-button-active-text-color: var(--tt-gray-light-a-900);
1349
+ --tt-button-active-text-color-emphasized: var(--tt-gray-light-a-900);
1350
+ --tt-button-active-text-color-subdued: var(--tt-gray-light-a-900);
1351
+ --tt-button-disabled-text-color: var(--tt-gray-light-a-400);
1352
+ --tt-button-default-icon-color: var(--white);
1353
+ --tt-button-hover-icon-color: var(--white);
1354
+ --tt-button-active-icon-color: var(--tt-brand-color-600);
1355
+ --tt-button-active-icon-color-emphasized: var(--tt-brand-color-600);
1356
+ --tt-button-active-icon-color-subdued: var(--tt-brand-color-600);
1357
+ --tt-button-disabled-icon-color: var(--tt-gray-light-a-400);
1358
+ --tt-button-default-icon-sub-color: var(--tt-gray-dark-a-500);
1359
+ --tt-button-hover-icon-sub-color: var(--tt-gray-dark-a-500);
1360
+ --tt-button-active-icon-sub-color: var(--tt-gray-light-a-500);
1361
+ --tt-button-active-icon-sub-color-emphasized: var(--tt-gray-light-a-500);
1362
+ --tt-button-active-icon-sub-color-subdued: var(--tt-gray-light-a-500);
1363
+ --tt-button-disabled-icon-sub-color: var(--tt-gray-light-a-100);
1364
+ --tt-button-default-dropdown-arrows-color: var(--white);
1365
+ --tt-button-hover-dropdown-arrows-color: var(--white);
1366
+ --tt-button-active-dropdown-arrows-color: var(--tt-gray-light-a-700);
1367
+ --tt-button-active-dropdown-arrows-color-emphasized: var(--tt-gray-light-a-700);
1368
+ --tt-button-active-dropdown-arrows-color-subdued: var(--tt-gray-light-a-700);
1369
+ --tt-button-disabled-dropdown-arrows-color: var(--tt-gray-light-a-400);
1421
1370
  }
1422
- .tiptap.ProseMirror h4 {
1423
- font-size: 1em;
1424
- font-weight: 600;
1425
- margin-top: 2em;
1371
+ .dark .tiptap-button[data-style=primary] {
1372
+ --tt-button-default-bg-color: var(--tt-brand-color-500);
1373
+ --tt-button-hover-bg-color: var(--tt-brand-color-600);
1374
+ --tt-button-active-bg-color: var(--tt-brand-color-900);
1375
+ --tt-button-active-bg-color-emphasized: var(--tt-brand-color-900);
1376
+ --tt-button-active-bg-color-subdued: var(--tt-brand-color-900);
1377
+ --tt-button-active-hover-bg-color: var(--tt-brand-color-800);
1378
+ --tt-button-active-hover-bg-color-emphasized: var(--tt-brand-color-800);
1379
+ --tt-button-active-hover-bg-color-subdued: var(--tt-brand-color-800);
1380
+ --tt-button-disabled-bg-color: var(--tt-gray-dark-a-100);
1381
+ }
1382
+ .dark .tiptap-button[data-style=primary] {
1383
+ --tt-button-default-text-color: var(--white);
1384
+ --tt-button-hover-text-color: var(--white);
1385
+ --tt-button-active-text-color: var(--tt-gray-dark-a-900);
1386
+ --tt-button-active-text-color-emphasized: var(--tt-gray-dark-a-900);
1387
+ --tt-button-active-text-color-subdued: var(--tt-gray-dark-a-900);
1388
+ --tt-button-disabled-text-color: var(--tt-gray-dark-a-300);
1389
+ }
1390
+ .dark .tiptap-button[data-style=primary] {
1391
+ --tt-button-default-icon-color: var(--white);
1392
+ --tt-button-hover-icon-color: var(--white);
1393
+ --tt-button-active-icon-color: var(--tt-brand-color-400);
1394
+ --tt-button-active-icon-color-emphasized: var(--tt-brand-color-400);
1395
+ --tt-button-active-icon-color-subdued: var(--tt-brand-color-400);
1396
+ --tt-button-disabled-icon-color: var(--tt-gray-dark-a-300);
1397
+ }
1398
+ .dark .tiptap-button[data-style=primary] {
1399
+ --tt-button-default-icon-sub-color: var(--tt-gray-dark-a-400);
1400
+ --tt-button-hover-icon-sub-color: var(--tt-gray-dark-a-500);
1401
+ --tt-button-active-icon-sub-color: var(--tt-gray-dark-a-300);
1402
+ --tt-button-active-icon-sub-color-emphasized: var(--tt-gray-dark-a-400);
1403
+ --tt-button-active-icon-sub-color-subdued: var(--tt-gray-dark-a-300);
1404
+ --tt-button-disabled-icon-sub-color: var(--tt-gray-dark-a-100);
1405
+ }
1406
+ .dark .tiptap-button[data-style=primary] {
1407
+ --tt-button-default-dropdown-arrows-color: var(--white);
1408
+ --tt-button-hover-dropdown-arrows-color: var(--white);
1409
+ --tt-button-active-dropdown-arrows-color: var(--tt-gray-dark-a-600);
1410
+ --tt-button-active-dropdown-arrows-color-emphasized: var(--tt-gray-dark-a-600);
1411
+ --tt-button-active-dropdown-arrows-color-subdued: var(--tt-gray-dark-a-600);
1412
+ --tt-button-disabled-dropdown-arrows-color: var(--tt-gray-dark-a-400);
1426
1413
  }
1427
1414
 
1428
- /* src/components/MarkdownEditor/components/tiptap-node/horizontal-rule-node/horizontal-rule-node.less */
1429
- .tiptap.ProseMirror {
1430
- --horizontal-rule-color: var(--tt-gray-light-a-200);
1415
+ /* src/components/MarkdownEditor/components/tiptap-ui-primitive/button/button-group.less */
1416
+ .tiptap-button-group {
1417
+ position: relative;
1418
+ display: flex;
1419
+ vertical-align: middle;
1431
1420
  }
1432
- .dark .tiptap.ProseMirror {
1433
- --horizontal-rule-color: var(--tt-gray-dark-a-200);
1421
+ .tiptap-button-group[data-orientation=vertical] {
1422
+ flex-direction: column;
1423
+ align-items: flex-start;
1424
+ justify-content: center;
1425
+ min-width: max-content;
1434
1426
  }
1435
- .tiptap.ProseMirror hr {
1436
- border: none;
1437
- height: 1px;
1438
- background-color: var(--horizontal-rule-color);
1427
+ .tiptap-button-group[data-orientation=vertical] > .tiptap-button {
1428
+ width: 100%;
1439
1429
  }
1440
- .tiptap.ProseMirror [data-type=horizontalRule] {
1441
- margin-top: 2.25em;
1442
- margin-bottom: 2.25em;
1443
- padding-top: 0.75rem;
1444
- padding-bottom: 0.75rem;
1430
+ .tiptap-button-group[data-orientation=horizontal] {
1431
+ gap: 0.125rem;
1432
+ flex-direction: row;
1433
+ align-items: center;
1445
1434
  }
1446
1435
 
1447
- /* src/components/MarkdownEditor/components/tiptap-node/image-node/image-node.less */
1448
- .tiptap.ProseMirror img {
1449
- max-width: 100%;
1450
- height: auto;
1451
- display: block;
1436
+ /* src/components/MarkdownEditor/components/tiptap-ui-primitive/button/button.less */
1437
+ .tiptap-button {
1438
+ font-size: 0.875rem;
1439
+ font-weight: 500;
1440
+ font-feature-settings: "salt" on, "cv01" on;
1441
+ line-height: 1.15;
1442
+ height: 2rem;
1443
+ min-width: 2rem;
1444
+ border: none;
1445
+ padding: 0.5rem;
1446
+ gap: 0.25rem;
1447
+ display: flex;
1448
+ align-items: center;
1449
+ justify-content: center;
1450
+ border-radius: var(--tt-radius-lg, 0.75rem);
1451
+ transition-property:
1452
+ background,
1453
+ color,
1454
+ opacity;
1455
+ transition-duration: var(--tt-transition-duration-default);
1456
+ transition-timing-function: var(--tt-transition-easing-default);
1452
1457
  }
1453
- .tiptap.ProseMirror > img:not([data-type=emoji] img) {
1454
- margin: 2rem 0;
1455
- outline: 0.125rem solid transparent;
1456
- border-radius: var(--tt-radius-xs, 0.25rem);
1458
+ .tiptap-button:focus-visible {
1459
+ outline: none;
1457
1460
  }
1458
- .tiptap.ProseMirror img:not([data-type=emoji] img).ProseMirror-selectednode {
1459
- outline-color: var(--tt-brand-color-500);
1461
+ .tiptap-button[data-highlighted=true],
1462
+ .tiptap-button[data-focus-visible=true] {
1463
+ background-color: var(--tt-button-hover-bg-color);
1464
+ color: var(--tt-button-hover-text-color);
1460
1465
  }
1461
- .tiptap.ProseMirror .tiptap-thread:has(> img) {
1462
- margin: 2rem 0;
1466
+ .tiptap-button[data-weight=small] {
1467
+ width: 1.5rem;
1468
+ min-width: 1.5rem;
1469
+ padding-right: 0;
1470
+ padding-left: 0;
1463
1471
  }
1464
- .tiptap.ProseMirror .tiptap-thread:has(> img) img {
1465
- outline: 0.125rem solid transparent;
1466
- border-radius: var(--tt-radius-xs, 0.25rem);
1472
+ .tiptap-button[data-size=large] {
1473
+ font-size: 0.9375rem;
1474
+ height: 2.375rem;
1475
+ min-width: 2.375rem;
1476
+ padding: 0.625rem;
1477
+ }
1478
+ .tiptap-button[data-size=small] {
1479
+ font-size: 0.75rem;
1480
+ line-height: 1.2;
1481
+ height: 1.5rem;
1482
+ min-width: 1.5rem;
1483
+ padding: 0.3125rem;
1484
+ border-radius: var(--tt-radius-md, 0.5rem);
1485
+ }
1486
+ .tiptap-button .tiptap-button-text {
1487
+ padding: 0 0.125rem;
1488
+ flex-grow: 1;
1489
+ text-align: left;
1490
+ line-height: 1.5rem;
1491
+ }
1492
+ .tiptap-button[data-text-trim=on] .tiptap-button-text {
1493
+ text-overflow: ellipsis;
1494
+ overflow: hidden;
1495
+ }
1496
+ .tiptap-button .tiptap-button-icon,
1497
+ .tiptap-button .tiptap-button-icon-sub,
1498
+ .tiptap-button .tiptap-button-dropdown-arrows,
1499
+ .tiptap-button .tiptap-button-dropdown-small {
1500
+ flex-shrink: 0;
1501
+ }
1502
+ .tiptap-button .tiptap-button-icon {
1503
+ width: 1rem;
1504
+ height: 1rem;
1505
+ }
1506
+ .tiptap-button[data-size=large] .tiptap-button-icon {
1507
+ width: 1.125rem;
1508
+ height: 1.125rem;
1467
1509
  }
1468
- .tiptap.ProseMirror .tiptap-thread img {
1469
- margin: 0;
1510
+ .tiptap-button[data-size=small] .tiptap-button-icon {
1511
+ width: 0.875rem;
1512
+ height: 0.875rem;
1470
1513
  }
1471
-
1472
- /* src/components/MarkdownEditor/components/tiptap-node/list-node/list-node.less */
1473
- .tiptap.ProseMirror {
1474
- --tt-checklist-bg-color: var(--tt-gray-light-a-100);
1475
- --tt-checklist-bg-active-color: var(--tt-gray-light-a-900);
1476
- --tt-checklist-border-color: var(--tt-gray-light-a-200);
1477
- --tt-checklist-border-active-color: var(--tt-gray-light-a-900);
1478
- --tt-checklist-check-icon-color: var(--white);
1479
- --tt-checklist-text-active: var(--tt-gray-light-a-500);
1514
+ .tiptap-button .tiptap-button-icon-sub {
1515
+ width: 1rem;
1516
+ height: 1rem;
1480
1517
  }
1481
- .dark .tiptap.ProseMirror {
1482
- --tt-checklist-bg-color: var(--tt-gray-dark-a-100);
1483
- --tt-checklist-bg-active-color: var(--tt-gray-dark-a-900);
1484
- --tt-checklist-border-color: var(--tt-gray-dark-a-200);
1485
- --tt-checklist-border-active-color: var(--tt-gray-dark-a-900);
1486
- --tt-checklist-check-icon-color: var(--black);
1487
- --tt-checklist-text-active: var(--tt-gray-dark-a-500);
1518
+ .tiptap-button[data-size=large] .tiptap-button-icon-sub {
1519
+ width: 1.125rem;
1520
+ height: 1.125rem;
1488
1521
  }
1489
- .tiptap.ProseMirror ol,
1490
- .tiptap.ProseMirror ul {
1491
- margin-top: 1.5em;
1492
- margin-bottom: 1.5em;
1493
- padding-left: 1.5em;
1522
+ .tiptap-button[data-size=small] .tiptap-button-icon-sub {
1523
+ width: 0.875rem;
1524
+ height: 0.875rem;
1494
1525
  }
1495
- .tiptap.ProseMirror ol:first-child,
1496
- .tiptap.ProseMirror ul:first-child {
1497
- margin-top: 0;
1526
+ .tiptap-button .tiptap-button-dropdown-arrows {
1527
+ width: 0.75rem;
1528
+ height: 0.75rem;
1498
1529
  }
1499
- .tiptap.ProseMirror ol:last-child,
1500
- .tiptap.ProseMirror ul:last-child {
1501
- margin-bottom: 0;
1530
+ .tiptap-button[data-size=large] .tiptap-button-dropdown-arrows {
1531
+ width: 0.875rem;
1532
+ height: 0.875rem;
1502
1533
  }
1503
- .tiptap.ProseMirror ol ol,
1504
- .tiptap.ProseMirror ul ol,
1505
- .tiptap.ProseMirror ol ul,
1506
- .tiptap.ProseMirror ul ul {
1507
- margin-top: 0;
1508
- margin-bottom: 0;
1534
+ .tiptap-button[data-size=small] .tiptap-button-dropdown-arrows {
1535
+ width: 0.625rem;
1536
+ height: 0.625rem;
1509
1537
  }
1510
- .tiptap.ProseMirror li p {
1511
- margin-top: 0;
1512
- line-height: 1.6;
1538
+ .tiptap-button .tiptap-button-dropdown-small {
1539
+ width: 0.625rem;
1540
+ height: 0.625rem;
1513
1541
  }
1514
- .tiptap.ProseMirror ol {
1515
- list-style: decimal;
1542
+ .tiptap-button[data-size=large] .tiptap-button-dropdown-small {
1543
+ width: 0.75rem;
1544
+ height: 0.75rem;
1516
1545
  }
1517
- .tiptap.ProseMirror ol ol {
1518
- list-style: lower-alpha;
1546
+ .tiptap-button[data-size=small] .tiptap-button-dropdown-small {
1547
+ width: 0.5rem;
1548
+ height: 0.5rem;
1519
1549
  }
1520
- .tiptap.ProseMirror ol ol ol {
1521
- list-style: lower-roman;
1550
+ .tiptap-button:has(> svg):not(:has(> :not(svg))) {
1551
+ gap: 0.125rem;
1522
1552
  }
1523
- .tiptap.ProseMirror ul:not([data-type=taskList]) {
1524
- list-style: disc;
1553
+ .tiptap-button:has(> svg):not(:has(> :not(svg)))[data-size=large],
1554
+ .tiptap-button:has(> svg):not(:has(> :not(svg)))[data-size=small] {
1555
+ gap: 0.125rem;
1525
1556
  }
1526
- .tiptap.ProseMirror ul:not([data-type=taskList]) ul {
1527
- list-style: circle;
1557
+ .tiptap-button:has(> svg:nth-of-type(2)):has(> .tiptap-button-dropdown-small):not(:has(> svg:nth-of-type(3))):not(:has(> .tiptap-button-text)) {
1558
+ gap: 0;
1559
+ padding-right: 0.25rem;
1528
1560
  }
1529
- .tiptap.ProseMirror ul:not([data-type=taskList]) ul ul {
1530
- list-style: square;
1561
+ .tiptap-button:has(> svg:nth-of-type(2)):has(> .tiptap-button-dropdown-small):not(:has(> svg:nth-of-type(3))):not(:has(> .tiptap-button-text))[data-size=large] {
1562
+ padding-right: 0.375rem;
1531
1563
  }
1532
- .tiptap.ProseMirror ul[data-type=taskList] {
1533
- padding-left: 0.25em;
1564
+ .tiptap-button:has(> svg:nth-of-type(2)):has(> .tiptap-button-dropdown-small):not(:has(> svg:nth-of-type(3))):not(:has(> .tiptap-button-text))[data-size=small] {
1565
+ padding-right: 0.25rem;
1534
1566
  }
1535
- .tiptap.ProseMirror ul[data-type=taskList] li {
1567
+ .tiptap-button .tiptap-button-emoji {
1568
+ width: 1rem;
1536
1569
  display: flex;
1537
- flex-direction: row;
1538
- align-items: flex-start;
1570
+ justify-content: center;
1539
1571
  }
1540
- .tiptap.ProseMirror ul[data-type=taskList] li:not(:has(> p:first-child)) {
1541
- list-style-type: none;
1572
+ .tiptap-button[data-size=large] .tiptap-button-emoji {
1573
+ width: 1.125rem;
1542
1574
  }
1543
- .tiptap.ProseMirror ul[data-type=taskList] li[data-checked=true] > div > p {
1544
- opacity: 0.5;
1545
- text-decoration: line-through;
1575
+ .tiptap-button[data-size=small] .tiptap-button-emoji {
1576
+ width: 0.875rem;
1546
1577
  }
1547
- .tiptap.ProseMirror ul[data-type=taskList] li[data-checked=true] > div > p span {
1548
- text-decoration: line-through;
1578
+ .tiptap-button {
1579
+ background-color: var(--tt-button-default-bg-color);
1580
+ color: var(--tt-button-default-text-color);
1549
1581
  }
1550
- .tiptap.ProseMirror ul[data-type=taskList] li label {
1551
- position: relative;
1552
- padding-top: 0.375rem;
1553
- padding-right: 0.5rem;
1582
+ .tiptap-button .tiptap-button-icon {
1583
+ color: var(--tt-button-default-icon-color);
1554
1584
  }
1555
- .tiptap.ProseMirror ul[data-type=taskList] li label input[type=checkbox] {
1556
- position: absolute;
1557
- opacity: 0;
1558
- width: 0;
1559
- height: 0;
1585
+ .tiptap-button .tiptap-button-icon-sub {
1586
+ color: var(--tt-button-default-icon-sub-color);
1560
1587
  }
1561
- .tiptap.ProseMirror ul[data-type=taskList] li label span {
1562
- display: block;
1563
- width: 1em;
1564
- height: 1em;
1565
- border: 1px solid var(--tt-checklist-border-color);
1566
- border-radius: var(--tt-radius-xs, 0.25rem);
1567
- position: relative;
1568
- cursor: pointer;
1569
- background-color: var(--tt-checklist-bg-color);
1570
- transition: background-color 80ms ease-out, border-color 80ms ease-out;
1588
+ .tiptap-button .tiptap-button-dropdown-arrows {
1589
+ color: var(--tt-button-default-dropdown-arrows-color);
1571
1590
  }
1572
- .tiptap.ProseMirror ul[data-type=taskList] li label span::before {
1573
- content: "";
1574
- position: absolute;
1575
- left: 50%;
1576
- top: 50%;
1577
- transform: translate(-50%, -50%);
1578
- width: 0.75em;
1579
- height: 0.75em;
1580
- background-color: var(--tt-checklist-check-icon-color);
1581
- opacity: 0;
1582
- -webkit-mask: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21.4142%204.58579C22.1953%205.36683%2022.1953%206.63317%2021.4142%207.41421L10.4142%2018.4142C9.63317%2019.1953%208.36684%2019.1953%207.58579%2018.4142L2.58579%2013.4142C1.80474%2012.6332%201.80474%2011.3668%202.58579%2010.5858C3.36683%209.80474%204.63317%209.80474%205.41421%2010.5858L9%2014.1716L18.5858%204.58579C19.3668%203.80474%2020.6332%203.80474%2021.4142%204.58579Z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E) center / contain no-repeat;
1583
- mask: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21.4142%204.58579C22.1953%205.36683%2022.1953%206.63317%2021.4142%207.41421L10.4142%2018.4142C9.63317%2019.1953%208.36684%2019.1953%207.58579%2018.4142L2.58579%2013.4142C1.80474%2012.6332%201.80474%2011.3668%202.58579%2010.5858C3.36683%209.80474%204.63317%209.80474%205.41421%2010.5858L9%2014.1716L18.5858%204.58579C19.3668%203.80474%2020.6332%203.80474%2021.4142%204.58579Z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E) center / contain no-repeat;
1591
+ .tiptap-button .tiptap-button-dropdown-small {
1592
+ color: var(--tt-button-default-dropdown-arrows-color);
1584
1593
  }
1585
- .tiptap.ProseMirror ul[data-type=taskList] li label input[type=checkbox]:checked + span {
1586
- background: var(--tt-checklist-bg-active-color);
1587
- border-color: var(--tt-checklist-border-active-color);
1594
+ .tiptap-button:hover:not([data-active-item=true]):not([disabled]),
1595
+ .tiptap-button[data-active-item=true]:not([disabled]),
1596
+ .tiptap-button[data-highlighted]:not([disabled]):not([data-highlighted=false]) {
1597
+ background-color: var(--tt-button-hover-bg-color);
1598
+ color: var(--tt-button-hover-text-color);
1588
1599
  }
1589
- .tiptap.ProseMirror ul[data-type=taskList] li label input[type=checkbox]:checked + span::before {
1590
- opacity: 1;
1600
+ .tiptap-button:hover:not([data-active-item=true]):not([disabled]) .tiptap-button-icon,
1601
+ .tiptap-button[data-active-item=true]:not([disabled]) .tiptap-button-icon,
1602
+ .tiptap-button[data-highlighted]:not([disabled]):not([data-highlighted=false]) .tiptap-button-icon {
1603
+ color: var(--tt-button-hover-icon-color);
1591
1604
  }
1592
- .tiptap.ProseMirror ul[data-type=taskList] li div {
1593
- flex: 1 1 0%;
1594
- min-width: 0;
1605
+ .tiptap-button:hover:not([data-active-item=true]):not([disabled]) .tiptap-button-icon-sub,
1606
+ .tiptap-button[data-active-item=true]:not([disabled]) .tiptap-button-icon-sub,
1607
+ .tiptap-button[data-highlighted]:not([disabled]):not([data-highlighted=false]) .tiptap-button-icon-sub {
1608
+ color: var(--tt-button-hover-icon-sub-color);
1595
1609
  }
1596
-
1597
- /* src/components/MarkdownEditor/components/tiptap-node/paragraph-node/paragraph-node.less */
1598
- .tiptap.ProseMirror {
1599
- --tt-collaboration-carets-label: var(--tt-gray-light-900);
1600
- --link-text-color: var(--tt-brand-color-500);
1601
- --thread-text: var(--tt-gray-light-900);
1602
- --placeholder-color: var(--tt-gray-light-a-400);
1603
- --thread-bg-color: var(--tt-color-yellow-inc-2);
1604
- --tiptap-ai-insertion-color: var(--tt-brand-color-600);
1610
+ .tiptap-button:hover:not([data-active-item=true]):not([disabled]) .tiptap-button-dropdown-arrows,
1611
+ .tiptap-button[data-active-item=true]:not([disabled]) .tiptap-button-dropdown-arrows,
1612
+ .tiptap-button[data-highlighted]:not([disabled]):not([data-highlighted=false]) .tiptap-button-dropdown-arrows,
1613
+ .tiptap-button:hover:not([data-active-item=true]):not([disabled]) .tiptap-button-dropdown-small,
1614
+ .tiptap-button[data-active-item=true]:not([disabled]) .tiptap-button-dropdown-small,
1615
+ .tiptap-button[data-highlighted]:not([disabled]):not([data-highlighted=false]) .tiptap-button-dropdown-small {
1616
+ color: var(--tt-button-hover-dropdown-arrows-color);
1605
1617
  }
1606
- .dark .tiptap.ProseMirror {
1607
- --tt-collaboration-carets-label: var(--tt-gray-dark-100);
1608
- --link-text-color: var(--tt-brand-color-400);
1609
- --thread-text: var(--tt-gray-dark-900);
1610
- --placeholder-color: var(--tt-gray-dark-a-400);
1611
- --thread-bg-color: var(--tt-color-yellow-dec-2);
1612
- --tiptap-ai-insertion-color: var(--tt-brand-color-400);
1618
+ .tiptap-button[data-active-state=on]:not([disabled]),
1619
+ .tiptap-button[data-state=open]:not([disabled]) {
1620
+ background-color: var(--tt-button-active-bg-color);
1621
+ color: var(--tt-button-active-text-color);
1613
1622
  }
1614
- .tiptap.ProseMirror > * {
1615
- position: relative;
1623
+ .tiptap-button[data-active-state=on]:not([disabled]) .tiptap-button-icon,
1624
+ .tiptap-button[data-state=open]:not([disabled]) .tiptap-button-icon {
1625
+ color: var(--tt-button-active-icon-color);
1616
1626
  }
1617
- .tiptap.ProseMirror {
1618
- white-space: pre-wrap;
1619
- outline: none;
1620
- caret-color: var(--tt-cursor-color);
1627
+ .tiptap-button[data-active-state=on]:not([disabled]) .tiptap-button-icon-sub,
1628
+ .tiptap-button[data-state=open]:not([disabled]) .tiptap-button-icon-sub {
1629
+ color: var(--tt-button-active-icon-sub-color);
1621
1630
  }
1622
- .tiptap.ProseMirror p:not(:first-child):not(td p):not(th p) {
1623
- font-size: 1rem;
1624
- line-height: 1.6;
1625
- font-weight: normal;
1626
- margin-top: 20px;
1631
+ .tiptap-button[data-active-state=on]:not([disabled]) .tiptap-button-dropdown-arrows,
1632
+ .tiptap-button[data-state=open]:not([disabled]) .tiptap-button-dropdown-arrows,
1633
+ .tiptap-button[data-active-state=on]:not([disabled]) .tiptap-button-dropdown-small,
1634
+ .tiptap-button[data-state=open]:not([disabled]) .tiptap-button-dropdown-small {
1635
+ color: var(--tt-button-active-dropdown-arrows-color);
1627
1636
  }
1628
- .tiptap.ProseMirror:not(.readonly):not(.ProseMirror-hideselection) ::selection {
1629
- background-color: var(--tt-selection-color);
1637
+ .tiptap-button[data-active-state=on]:not([disabled]):hover,
1638
+ .tiptap-button[data-state=open]:not([disabled]):hover {
1639
+ background-color: var(--tt-button-active-hover-bg-color);
1630
1640
  }
1631
- .tiptap.ProseMirror:not(.readonly):not(.ProseMirror-hideselection) .selection::selection {
1632
- background: transparent;
1641
+ .tiptap-button[data-active-state=on]:not([disabled])[data-appearance=emphasized],
1642
+ .tiptap-button[data-state=open]:not([disabled])[data-appearance=emphasized] {
1643
+ background-color: var(--tt-button-active-bg-color-emphasized);
1644
+ color: var(--tt-button-active-text-color-emphasized);
1633
1645
  }
1634
- .tiptap.ProseMirror .selection {
1635
- display: inline;
1636
- background-color: var(--tt-selection-color);
1646
+ .tiptap-button[data-active-state=on]:not([disabled])[data-appearance=emphasized] .tiptap-button-icon,
1647
+ .tiptap-button[data-state=open]:not([disabled])[data-appearance=emphasized] .tiptap-button-icon {
1648
+ color: var(--tt-button-active-icon-color-emphasized);
1637
1649
  }
1638
- .tiptap.ProseMirror .ProseMirror-selectednode:not(img):not(pre):not(.react-renderer) {
1639
- border-radius: var(--tt-radius-md);
1640
- background-color: var(--tt-selection-color);
1650
+ .tiptap-button[data-active-state=on]:not([disabled])[data-appearance=emphasized] .tiptap-button-icon-sub,
1651
+ .tiptap-button[data-state=open]:not([disabled])[data-appearance=emphasized] .tiptap-button-icon-sub {
1652
+ color: var(--tt-button-active-icon-sub-color-emphasized);
1653
+ }
1654
+ .tiptap-button[data-active-state=on]:not([disabled])[data-appearance=emphasized] .tiptap-button-dropdown-arrows,
1655
+ .tiptap-button[data-state=open]:not([disabled])[data-appearance=emphasized] .tiptap-button-dropdown-arrows,
1656
+ .tiptap-button[data-active-state=on]:not([disabled])[data-appearance=emphasized] .tiptap-button-dropdown-small,
1657
+ .tiptap-button[data-state=open]:not([disabled])[data-appearance=emphasized] .tiptap-button-dropdown-small {
1658
+ color: var(--tt-button-active-dropdown-arrows-color-emphasized);
1659
+ }
1660
+ .tiptap-button[data-active-state=on]:not([disabled])[data-appearance=emphasized]:hover,
1661
+ .tiptap-button[data-state=open]:not([disabled])[data-appearance=emphasized]:hover {
1662
+ background-color: var(--tt-button-active-hover-bg-color-emphasized);
1641
1663
  }
1642
- .tiptap.ProseMirror .ProseMirror-hideselection {
1643
- caret-color: transparent;
1664
+ .tiptap-button[data-active-state=on]:not([disabled])[data-appearance=subdued],
1665
+ .tiptap-button[data-state=open]:not([disabled])[data-appearance=subdued] {
1666
+ background-color: var(--tt-button-active-bg-color-subdued);
1667
+ color: var(--tt-button-active-text-color-subdued);
1644
1668
  }
1645
- .tiptap.ProseMirror.resize-cursor {
1646
- cursor: ew-resize;
1647
- cursor: col-resize;
1669
+ .tiptap-button[data-active-state=on]:not([disabled])[data-appearance=subdued] .tiptap-button-icon,
1670
+ .tiptap-button[data-state=open]:not([disabled])[data-appearance=subdued] .tiptap-button-icon {
1671
+ color: var(--tt-button-active-icon-color-subdued);
1648
1672
  }
1649
- .tiptap.ProseMirror a span {
1650
- text-decoration: underline;
1673
+ .tiptap-button[data-active-state=on]:not([disabled])[data-appearance=subdued] .tiptap-button-icon-sub,
1674
+ .tiptap-button[data-state=open]:not([disabled])[data-appearance=subdued] .tiptap-button-icon-sub {
1675
+ color: var(--tt-button-active-icon-sub-color-subdued);
1651
1676
  }
1652
- .tiptap.ProseMirror s span {
1653
- text-decoration: line-through;
1677
+ .tiptap-button[data-active-state=on]:not([disabled])[data-appearance=subdued] .tiptap-button-dropdown-arrows,
1678
+ .tiptap-button[data-state=open]:not([disabled])[data-appearance=subdued] .tiptap-button-dropdown-arrows,
1679
+ .tiptap-button[data-active-state=on]:not([disabled])[data-appearance=subdued] .tiptap-button-dropdown-small,
1680
+ .tiptap-button[data-state=open]:not([disabled])[data-appearance=subdued] .tiptap-button-dropdown-small {
1681
+ color: var(--tt-button-active-dropdown-arrows-color-subdued);
1654
1682
  }
1655
- .tiptap.ProseMirror u span {
1656
- text-decoration: underline;
1683
+ .tiptap-button[data-active-state=on]:not([disabled])[data-appearance=subdued]:hover,
1684
+ .tiptap-button[data-state=open]:not([disabled])[data-appearance=subdued]:hover {
1685
+ background-color: var(--tt-button-active-hover-bg-color-subdued);
1657
1686
  }
1658
- .tiptap.ProseMirror .tiptap-ai-insertion {
1659
- color: var(--tiptap-ai-insertion-color);
1687
+ .tiptap-button[data-active-state=on]:not([disabled])[data-appearance=subdued]:hover .tiptap-button-icon,
1688
+ .tiptap-button[data-state=open]:not([disabled])[data-appearance=subdued]:hover .tiptap-button-icon {
1689
+ color: var(--tt-button-active-icon-color-subdued);
1660
1690
  }
1661
- .tiptap.ProseMirror .collaboration-carets__caret {
1662
- border-right: 1px solid transparent;
1663
- border-left: 1px solid transparent;
1664
- pointer-events: none;
1665
- margin-left: -1px;
1666
- margin-right: -1px;
1667
- position: relative;
1668
- word-break: normal;
1691
+ .tiptap-button:disabled {
1692
+ background-color: var(--tt-button-disabled-bg-color);
1693
+ color: var(--tt-button-disabled-text-color);
1669
1694
  }
1670
- .tiptap.ProseMirror .collaboration-carets__label {
1671
- color: var(--tt-collaboration-carets-label);
1672
- border-radius: 0.25rem;
1673
- border-bottom-left-radius: 0;
1674
- font-size: 0.75rem;
1675
- font-weight: 600;
1676
- left: -1px;
1677
- line-height: 1;
1678
- padding: 0.125rem 0.375rem;
1679
- position: absolute;
1680
- top: -1.3em;
1681
- user-select: none;
1682
- white-space: nowrap;
1695
+ .tiptap-button:disabled .tiptap-button-icon {
1696
+ color: var(--tt-button-disabled-icon-color);
1683
1697
  }
1684
- .tiptap.ProseMirror [data-type=emoji] img {
1685
- display: inline-block;
1686
- width: 1.25em;
1687
- height: 1.25em;
1688
- cursor: text;
1698
+
1699
+ /* src/components/MarkdownEditor/components/tiptap-ui-primitive/separator/separator.less */
1700
+ .tiptap-separator {
1701
+ --tt-link-border-color: var(--tt-gray-light-a-200);
1689
1702
  }
1690
- .tiptap.ProseMirror a {
1691
- color: var(--link-text-color);
1692
- text-decoration: underline;
1703
+ .dark .tiptap-separator {
1704
+ --tt-link-border-color: var(--tt-gray-dark-a-200);
1693
1705
  }
1694
- .tiptap.ProseMirror [data-type=mention] {
1695
- display: inline-block;
1696
- color: var(--tt-brand-color-500);
1706
+ .tiptap-separator {
1707
+ flex-shrink: 0;
1708
+ background-color: var(--tt-link-border-color);
1697
1709
  }
1698
- .tiptap.ProseMirror .tiptap-thread.tiptap-thread--unresolved.tiptap-thread--inline {
1699
- transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
1700
- color: var(--thread-text);
1701
- border-bottom: 2px dashed var(--tt-color-yellow-base);
1702
- font-weight: 600;
1710
+ .tiptap-separator[data-orientation=horizontal] {
1711
+ height: 1px;
1712
+ width: 100%;
1713
+ margin: 0.5rem 0;
1703
1714
  }
1704
- .tiptap.ProseMirror .tiptap-thread.tiptap-thread--unresolved.tiptap-thread--inline.tiptap-thread--selected,
1705
- .tiptap.ProseMirror .tiptap-thread.tiptap-thread--unresolved.tiptap-thread--inline.tiptap-thread--hovered {
1706
- background-color: var(--thread-bg-color);
1707
- border-bottom-color: transparent;
1715
+ .tiptap-separator[data-orientation=vertical] {
1716
+ height: 1.5rem;
1717
+ width: 1px;
1708
1718
  }
1709
- .tiptap.ProseMirror .tiptap-thread.tiptap-thread--unresolved.tiptap-thread--block:has(img) {
1710
- outline: 0.125rem solid var(--tt-color-yellow-base);
1711
- border-radius: var(--tt-radius-xs, 0.25rem);
1712
- overflow: hidden;
1713
- width: fit-content;
1719
+
1720
+ /* src/components/MarkdownEditor/components/tiptap-ui-primitive/toolbar/toolbar.less */
1721
+ :root {
1722
+ --tt-toolbar-height: 2.75rem;
1723
+ --tt-safe-area-bottom: env(safe-area-inset-bottom, 0px);
1724
+ --tt-toolbar-bg-color: var(--white);
1725
+ --tt-toolbar-border-color: var(--tt-gray-light-a-100);
1714
1726
  }
1715
- .tiptap.ProseMirror .tiptap-thread.tiptap-thread--unresolved.tiptap-thread--block:has(img).tiptap-thread--selected {
1716
- outline-width: 0.25rem;
1717
- outline-color: var(--tt-color-yellow-base);
1727
+ .dark {
1728
+ --tt-toolbar-bg-color: var(--black);
1729
+ --tt-toolbar-border-color: var(--tt-gray-dark-a-50);
1718
1730
  }
1719
- .tiptap.ProseMirror .tiptap-thread.tiptap-thread--unresolved.tiptap-thread--block:has(img).tiptap-thread--hovered {
1720
- outline-width: 0.25rem;
1731
+ .tiptap-toolbar {
1732
+ display: flex;
1733
+ align-items: center;
1734
+ gap: 0.25rem;
1721
1735
  }
1722
- .tiptap.ProseMirror .tiptap-thread.tiptap-thread--unresolved.tiptap-thread--block:not(:has(img)) {
1723
- border-radius: 0.25rem;
1724
- border-bottom: 0.125rem dashed var(--tt-color-yellow-base);
1725
- border-top: 0.125rem dashed var(--tt-color-yellow-base);
1726
- outline: 0.25rem solid transparent;
1736
+ .tiptap-toolbar-group {
1737
+ display: flex;
1738
+ align-items: center;
1739
+ gap: 0.125rem;
1727
1740
  }
1728
- .tiptap.ProseMirror .tiptap-thread.tiptap-thread--unresolved.tiptap-thread--block:not(:has(img)).tiptap-thread--hovered,
1729
- .tiptap.ProseMirror .tiptap-thread.tiptap-thread--unresolved.tiptap-thread--block:not(:has(img)).tiptap-thread--selected {
1730
- background-color: var(--tt-color-yellow-base);
1731
- outline-color: var(--tt-color-yellow-base);
1741
+ .tiptap-toolbar-group:empty {
1742
+ display: none;
1732
1743
  }
1733
- .tiptap.ProseMirror .tiptap-thread.tiptap-thread--resolved.tiptap-thread--inline.tiptap-thread--selected {
1734
- background-color: var(--tt-color-yellow-base);
1735
- border-color: transparent;
1736
- opacity: 0.5;
1744
+ .tiptap-toolbar-group:empty + .tiptap-separator,
1745
+ .tiptap-separator + .tiptap-toolbar-group:empty {
1746
+ display: none;
1737
1747
  }
1738
- .tiptap.ProseMirror .tiptap-thread.tiptap-thread--block:has(.react-renderer) {
1739
- margin-top: 3rem;
1740
- margin-bottom: 3rem;
1748
+ .tiptap-toolbar[data-variant=fixed] {
1749
+ position: sticky;
1750
+ top: 0;
1751
+ z-index: 10;
1752
+ width: 100%;
1753
+ min-height: var(--tt-toolbar-height);
1754
+ background: var(--tt-toolbar-bg-color);
1755
+ border-bottom: 1px solid var(--tt-toolbar-border-color);
1756
+ padding: 0 0.5rem;
1757
+ overflow-x: auto;
1758
+ overscroll-behavior-x: contain;
1759
+ -webkit-overflow-scrolling: touch;
1760
+ scrollbar-width: none;
1761
+ -ms-overflow-style: none;
1741
1762
  }
1742
- .is-empty:not(.with-slash)[data-placeholder]:has(> .ProseMirror-trailingBreak:only-child)::before {
1743
- content: attr(data-placeholder);
1763
+ .tiptap-toolbar[data-variant=fixed]::-webkit-scrollbar {
1764
+ display: none;
1744
1765
  }
1745
- .is-empty.with-slash[data-placeholder]:has(> .ProseMirror-trailingBreak:only-child)::before {
1746
- content: "\5f00\59cb\5199\4f5c\ff0c\8f93\5165'/'\67e5\770b\547d\4ee4\2026";
1747
- font-style: italic;
1766
+ @media (max-width: 480px) {
1767
+ .tiptap-toolbar[data-variant=fixed] {
1768
+ position: absolute;
1769
+ top: auto;
1770
+ height: calc(var(--tt-toolbar-height) + var(--tt-safe-area-bottom));
1771
+ border-top: 1px solid var(--tt-toolbar-border-color);
1772
+ border-bottom: none;
1773
+ padding: 0 0.5rem var(--tt-safe-area-bottom);
1774
+ flex-wrap: nowrap;
1775
+ justify-content: flex-start;
1776
+ }
1777
+ .tiptap-toolbar[data-variant=fixed] .tiptap-toolbar-group {
1778
+ flex: 0 0 auto;
1779
+ }
1748
1780
  }
1749
- .is-empty[data-placeholder]:has(> .ProseMirror-trailingBreak:only-child):before {
1750
- pointer-events: none;
1751
- height: 0;
1752
- position: absolute;
1753
- width: 100%;
1754
- text-align: inherit;
1755
- left: 0;
1756
- right: 0;
1781
+ .tiptap-toolbar[data-variant=floating] {
1782
+ --tt-toolbar-padding: 0.125rem;
1783
+ --tt-toolbar-border-width: 1px;
1784
+ padding: 0.188rem;
1785
+ border-radius: calc(var(--tt-toolbar-padding) + var(--tt-radius-lg) + var(--tt-toolbar-border-width));
1786
+ border: var(--tt-toolbar-border-width) solid var(--tt-toolbar-border-color);
1787
+ background-color: var(--tt-toolbar-bg-color);
1788
+ box-shadow: var(--tt-shadow-elevated-md);
1789
+ outline: none;
1790
+ overflow: hidden;
1757
1791
  }
1758
- .is-empty[data-placeholder]:has(> .ProseMirror-trailingBreak):before {
1759
- color: var(--placeholder-color);
1792
+ .tiptap-toolbar[data-variant=floating][data-plain=true] {
1793
+ padding: 0;
1794
+ border-radius: 0;
1795
+ border: none;
1796
+ box-shadow: none;
1797
+ background-color: transparent;
1760
1798
  }
1761
- .prosemirror-dropcursor-block,
1762
- .prosemirror-dropcursor-inline {
1763
- background: var(--tt-brand-color-400) !important;
1764
- border-radius: 0.25rem;
1765
- margin-left: -1px;
1766
- margin-right: -1px;
1767
- width: 100%;
1768
- height: 0.188rem;
1769
- cursor: grabbing;
1799
+ @media screen and (max-width: 480px) {
1800
+ .tiptap-toolbar[data-variant=floating] {
1801
+ width: 100%;
1802
+ border-radius: 0;
1803
+ border: none;
1804
+ box-shadow: none;
1805
+ }
1770
1806
  }
1771
1807
 
1772
1808
  /* src/components/MarkdownEditor/components/tiptap-ui-primitive/badge/badge-colors.less */
@@ -2295,40 +2331,6 @@
2295
2331
  align-items: stretch;
2296
2332
  }
2297
2333
 
2298
- /* src/components/MarkdownEditor/annotation/styles.module.less */
2299
- .styles_module_annotations {
2300
- margin-top: 8px;
2301
- }
2302
- .styles_module_annotations .styles_module_annotationItem {
2303
- cursor: pointer;
2304
- padding-left: 20px;
2305
- padding-right: 20px;
2306
- }
2307
- .styles_module_annotations .styles_module_annotationItem:hover {
2308
- background-color: #fafafa;
2309
- }
2310
- .styles_module_annotations .styles_module_annotationItem.styles_module_annotationItemSelected {
2311
- background-color: #e6f7ff;
2312
- border-left: 3px solid var(--ant-primary-color);
2313
- }
2314
-
2315
- /* src/components/MarkdownEditor/collection/styles.module.less */
2316
- .styles_module_collections {
2317
- margin-top: 8px;
2318
- }
2319
- .styles_module_collections .styles_module_collectionItem {
2320
- cursor: pointer;
2321
- padding-left: 20px;
2322
- padding-right: 20px;
2323
- }
2324
- .styles_module_collections .styles_module_collectionItem:hover {
2325
- background-color: #fafafa;
2326
- }
2327
- .styles_module_collections .styles_module_collectionItem.styles_module_collectionItemSelected {
2328
- background-color: #e6f7ff;
2329
- border-left: 3px solid var(--ant-primary-color);
2330
- }
2331
-
2332
2334
  /* src/components/MarkDrawing/styles.module.less */
2333
2335
  .styles_module_container {
2334
2336
  position: relative;