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