@tipp/ui-quill-editor 1.4.47 → 2.0.0

package/dist/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["webpack://Quill/src/assets/core.styl","webpack://Quill/src/assets/base.styl","webpack://Quill/src/assets/snow/tooltip.styl","webpack://Quill/src/assets/snow/toolbar.styl","webpack://Quill/src/assets/snow.styl","../style/custom-style.scss"],"names":[],"mappings":"AAWA;IACE,sBAAY;IACZ,uCAAsB;IACtB,eAAW;IACX,YAAQ;IACR,SAAQ;IACR;AAAU;AAGV;IACE;AAAY;AAKZ;IACE;AAAQ;AAEd;IACE,eAAM;IACN,WAAQ;IACR,kBAAY;IACZ,kBAAU;IACV;AAAK;AACL;IACE,SAAQ;IACR;AAAS;AAEb;IACE,sBAAY;IACZ,oFAAe;IACf,iBAAa;IACb,YAAQ;IACR,aAAS;IACT,gBAAY;IACZ,kBAAS;IACT,cAAU;OAAV,WAAU;IACV,gBAAe;IACf,gBAAY;IACZ,qBAAa;IACb;AAAW;AACX;IACE;AAAQ;AAEV;IACE,SAAQ;IACR;AAAS;AAEmB;IAAA;QAC1B;IAAa;AAAA;AACiB;IAAA;QAC9B;IAAe;AAAA;AACnB;IACE,yBAAA;IAuEA,mBAAc;IACd;AAxEiB;AACnB;IACE,sBAAQ;IACR;AAAS;AACX;IACE;AAAc;AAChB;IACE,qBAAiB;IACjB,mBAAc;IACd;AAAU;AAEV;IACE,qBAAS;IACT,mBAAgB;IAChB,kBAAc;IACd,iBAAY;IACZ,mBAAa;IACb;AAAO;AAIT;IACE;AAAO;AAEX;IACE;AAAS;AACX;IACE;AAAS;AACX;IACE;AAAS;AAGmB;IAAA;QAC1B;IAAa;AAAA;AACiB;IAAA;QAC9B;IAAe;AAAA;AAEnB;IACE;AAAmB;AACnB;IACE;AAAS;AAEX;IACE;AAAmB;AACnB;IACE;AAAS;AAGmB;IAAA;QAC1B;IAAa;AAAA;AACiB;IAAA;QAC9B;IAAe;AAAA;AATrB;IACE;AAAmB;AACnB;IACE;AAAS;AAGmB;IAAA;QAC1B;IAAa;AAAA;AACiB;IAAA;QAC9B;IAAe;AAAA;AATrB;IACE;AAAmB;AACnB;IACE;AAAS;AAGmB;IAAA;QAC1B;IAAa;AAAA;AACiB;IAAA;QAC9B;IAAe;AAAA;AATrB;IACE;AAAmB;AACnB;IACE;AAAS;AAGmB;IAAA;QAC1B;IAAa;AAAA;AACiB;IAAA;QAC9B;IAAe;AAAA;AATrB;IACE;AAAmB;AACnB;IACE;AAAS;AAGmB;IAAA;QAC1B;IAAa;AAAA;AACiB;IAAA;QAC9B;IAAe;AAAA;AATrB;IACE;AAAmB;AACnB;IACE;AAAS;AAGmB;IAAA;QAC1B;IAAa;AAAA;AACiB;IAAA;QAC9B;IAAe;AAAA;AATrB;IACE;AAAmB;AACnB;IACE;AAAS;AAGmB;IAAA;QAC1B;IAAa;AAAA;AACiB;IAAA;QAC9B;IAAe;AAAA;AATrB;IACE;AAAmB;AACnB;IACE;AAAS;AAGmB;IAAA;QAC1B;IAAa;AAAA;AACiB;IAAA;QAC9B;IAAe;AAAA;AATrB;IACE;AAAmB;AACnB;IACE;AAAS;AASb;IACE;AAAiB;AACnB;IACE;AAAuB;AACzB;IACE;AAAkB;AACpB;IACE;AAAwB;AAP1B;IACE;AAAiB;AACnB;IACE;AAAuB;AACzB;IACE;AAAkB;AACpB;IACE;AAAwB;AAP1B;IACE;AAAiB;AACnB;IACE;AAAuB;AACzB;IACE;AAAkB;AACpB;IACE;AAAwB;AAP1B;IACE;AAAiB;AACnB;IACE;AAAuB;AACzB;IACE;AAAkB;AACpB;IACE;AAAwB;AAP1B;IACE;AAAiB;AACnB;IACE;AAAuB;AACzB;IACE;AAAkB;AACpB;IACE;AAAwB;AAP1B;IACE;AAAiB;AACnB;IACE;AAAuB;AACzB;IACE;AAAkB;AACpB;IACE;AAAwB;AAP1B;IACE;AAAiB;AACnB;IACE;AAAuB;AACzB;IACE;AAAkB;AACpB;IACE;AAAwB;AAP1B;IACE;AAAiB;AACnB;IACE;AAAuB;AACzB;IACE;AAAkB;AACpB;IACE;AAAwB;AAP1B;IACE;AAAiB;AACnB;IACE;AAAuB;AACzB;IACE;AAAkB;AACpB;IACE;AAAwB;AAE5B;IACE;AAAe;AACf;IACE,iBAAa;IACb,oBAAiB;IACjB;AAAY;AAKd;IACE;AAAS;AAEb;IACE;AAAa;AAEf;IACE,cAAS;IACT;AAAW;AACb;IACE;AAAQ;AACV;IACE;AAAQ;AAEV;IACE;AAAkB;AACpB;IACE;AAAkB;AACpB;IACE;AAAkB;AACpB;IACE;AAAkB;AACpB;IACE;AAAkB;AACpB;IACE;AAAkB;AACpB;IACE;AAAkB;AAEpB;IACE;AAAO;AACT;IACE;AAAO;AACT;IACE;AA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","file":"index.css","sourcesContent":["// Styles necessary for Quill\n\nLIST_STYLE = decimal lower-alpha lower-roman\nLIST_STYLE_WIDTH = 1.2em\nLIST_STYLE_MARGIN = 0.3em\nLIST_STYLE_OUTER_WIDTH = LIST_STYLE_MARGIN + LIST_STYLE_WIDTH\nMAX_INDENT = 9\n\nresets(arr)\n  unquote('list-' + join(' list-', arr))\n\n.ql-container\n  box-sizing: border-box\n  font-family: Helvetica, Arial, sans-serif\n  font-size: 13px\n  height: 100%\n  margin: 0px\n  position: relative\n\n.ql-container.ql-disabled\n  .ql-tooltip\n    visibility: hidden\n\n.ql-container:not(.ql-disabled)\n  li[data-list=checked],\n  li[data-list=unchecked]\n    > .ql-ui\n      cursor: pointer\n\n.ql-clipboard\n  left: -100000px\n  height: 1px\n  overflow-y: hidden\n  position: absolute\n  top: 50%\n  p\n    margin: 0\n    padding: 0\n\n.ql-editor\n  box-sizing: border-box\n  counter-reset: resets(0..MAX_INDENT)\n  line-height: 1.42\n  height: 100%\n  outline: none\n  overflow-y: auto\n  padding: 12px 15px\n  tab-size: 4\n  -moz-tab-size: 4\n  text-align: left\n  white-space: pre-wrap\n  word-wrap: break-word\n  > *\n    cursor: text\n\n  p, ol, pre, blockquote, h1, h2, h3, h4, h5, h6\n    margin: 0\n    padding: 0\n  p, h1, h2, h3, h4, h5, h6\n    @supports (counter-set: none)\n      counter-set: resets(0..MAX_INDENT)\n    @supports not (counter-set: none)\n      counter-reset: resets(0..MAX_INDENT)\n  table\n    border-collapse: collapse\n  td\n    border: 1px solid #000\n    padding: 2px 5px\n  ol\n    padding-left: 1.5em\n  li\n    list-style-type: none\n    padding-left: LIST_STYLE_OUTER_WIDTH\n    position: relative\n\n    > .ql-ui:before\n      display: inline-block\n      margin-left: -1*LIST_STYLE_OUTER_WIDTH\n      margin-right: LIST_STYLE_MARGIN\n      text-align: right\n      white-space: nowrap\n      width: LIST_STYLE_WIDTH\n\n  li[data-list=checked],\n  li[data-list=unchecked]\n    > .ql-ui\n      color: #777\n\n  li[data-list=bullet] > .ql-ui:before\n    content: '\\2022'\n  li[data-list=checked] > .ql-ui:before\n    content: '\\2611'\n  li[data-list=unchecked] > .ql-ui:before\n    content: '\\2610'\n\n  li[data-list]\n    @supports (counter-set: none)\n      counter-set: resets(1..MAX_INDENT)\n    @supports not (counter-set: none)\n      counter-reset: resets(1..MAX_INDENT)\n\n  li[data-list=ordered]\n    counter-increment: list-0\n    > .ql-ui:before\n      content: unquote('counter(list-0, ' + LIST_STYLE[0] + ')') '. '\n  for num in (1..MAX_INDENT)\n    li[data-list=ordered].ql-indent-{num}\n      counter-increment: unquote('list-' + num)\n      > .ql-ui:before\n        content: unquote('counter(list-' + num + ', ' + LIST_STYLE[num%3] + ')') '. '\n    if (num < MAX_INDENT)\n      li[data-list].ql-indent-{num}\n        @supports (counter-set: none)\n          counter-set: resets((num+1)..MAX_INDENT)\n        @supports not (counter-set: none)\n          counter-reset: resets((num+1)..MAX_INDENT)\n\n  for num in (1..MAX_INDENT)\n    .ql-indent-{num}:not(.ql-direction-rtl)\n      padding-left: (3*num)em\n    li.ql-indent-{num}:not(.ql-direction-rtl)\n      padding-left: (3*num + LIST_STYLE_OUTER_WIDTH)em\n    .ql-indent-{num}.ql-direction-rtl.ql-align-right\n      padding-right: (3*num)em\n    li.ql-indent-{num}.ql-direction-rtl.ql-align-right\n      padding-right: (3*num + LIST_STYLE_OUTER_WIDTH)em\n\n  li.ql-direction-rtl\n    padding-right: LIST_STYLE_OUTER_WIDTH\n    > .ql-ui:before\n      margin-left: LIST_STYLE_MARGIN\n      margin-right: -1*LIST_STYLE_OUTER_WIDTH\n      text-align: left\n\n  table\n    table-layout: fixed\n    width: 100%\n    td\n      outline: none\n\n  .ql-code-block-container\n    font-family: monospace\n\n  .ql-video\n    display: block\n    max-width: 100%\n  .ql-video.ql-align-center\n    margin: 0 auto\n  .ql-video.ql-align-right\n    margin: 0 0 0 auto\n\n  .ql-bg-black\n    background-color: rgb(0,0,0)\n  .ql-bg-red\n    background-color: rgb(230,0,0)\n  .ql-bg-orange\n    background-color: rgb(255,153,0)\n  .ql-bg-yellow\n    background-color: rgb(255,255,0)\n  .ql-bg-green\n    background-color: rgb(0,138,0)\n  .ql-bg-blue\n    background-color: rgb(0,102,204)\n  .ql-bg-purple\n    background-color: rgb(153,51,255)\n\n  .ql-color-white\n    color: rgb(255,255,255)\n  .ql-color-red\n    color: rgb(230,0,0)\n  .ql-color-orange\n    color: rgb(255,153,0)\n  .ql-color-yellow\n    color: rgb(255,255,0)\n  .ql-color-green\n    color: rgb(0,138,0)\n  .ql-color-blue\n    color: rgb(0,102,204)\n  .ql-color-purple\n    color: rgb(153,51,255)\n\n  .ql-font-serif\n    font-family: Georgia, Times New Roman, serif\n  .ql-font-monospace\n    font-family: Monaco, Courier New, monospace\n\n  .ql-size-small\n    font-size: 0.75em\n  .ql-size-large\n    font-size: 1.5em\n  .ql-size-huge\n    font-size: 2.5em\n\n  .ql-direction-rtl\n    direction: rtl\n    text-align: inherit\n\n  .ql-align-center\n    text-align: center\n  .ql-align-justify\n    text-align: justify\n  .ql-align-right\n    text-align: right\n\n  .ql-ui\n    position: absolute\n\n.ql-editor.ql-blank::before\n  color: rgba(0,0,0,0.6)\n  content: attr(data-placeholder)\n  font-style: italic\n  left: 15px\n  pointer-events: none\n  position: absolute\n  right: 15px\n","// Styles shared between snow and bubble\n\ncontrolHeight = 24px\ninputPaddingWidth = 5px\ninputPaddingHeight = 3px\n\ncolorItemMargin = 2px\ncolorItemSize = 16px\ncolorItemsPerRow = 7\n\n\n.ql-{themeName}.ql-toolbar, .ql-{themeName} .ql-toolbar\n  &:after\n    clear: both\n    content: ''\n    display: table\n\n  button\n    background: none\n    border: none\n    cursor: pointer\n    display: inline-block\n    float: left\n    height: controlHeight\n    padding: inputPaddingHeight inputPaddingWidth\n    width: controlHeight + (inputPaddingWidth - inputPaddingHeight)*2\n\n    svg\n      float: left\n      height: 100%\n\n    &:active:hover\n      outline: none\n\n  input.ql-image[type=file]\n    display: none\n\n  button:hover, button:focus, button.ql-active,\n  .ql-picker-label:hover, .ql-picker-label.ql-active,\n  .ql-picker-item:hover, .ql-picker-item.ql-selected\n    color: activeColor\n    .ql-fill, .ql-stroke.ql-fill\n      fill: activeColor\n    .ql-stroke, .ql-stroke-miter\n      stroke: activeColor\n\n// Fix for iOS not losing hover on touch\n@media (pointer: coarse)\n  .ql-{themeName}.ql-toolbar, .ql-{themeName} .ql-toolbar\n    button:hover:not(.ql-active)\n      color: inactiveColor\n      .ql-fill, .ql-stroke.ql-fill\n        fill: inactiveColor\n      .ql-stroke, .ql-stroke-miter\n        stroke: inactiveColor\n\n.ql-{themeName}\n  box-sizing: border-box\n  *\n    box-sizing: border-box\n\n  .ql-hidden\n    display: none\n  .ql-out-bottom, .ql-out-top\n    visibility: hidden\n\n  .ql-tooltip\n    position: absolute\n    transform: translateY(10px)\n    a\n      cursor: pointer\n      text-decoration: none\n  .ql-tooltip.ql-flip\n    transform: translateY(-10px)\n\n  .ql-formats\n    &:after\n      clear: both\n      content: ''\n      display: table\n    display: inline-block\n    vertical-align: middle\n\n  .ql-stroke\n    fill: none\n    stroke: inactiveColor\n    stroke-linecap: round\n    stroke-linejoin: round\n    stroke-width: 2\n  .ql-stroke-miter\n    fill: none\n    stroke: inactiveColor\n    stroke-miterlimit: 10\n    stroke-width: 2\n\n  .ql-fill, .ql-stroke.ql-fill\n    fill: inactiveColor\n\n  .ql-empty\n    fill: none\n  .ql-even\n    fill-rule: evenodd\n  .ql-thin, .ql-stroke.ql-thin\n    stroke-width: 1\n  .ql-transparent\n    opacity: 0.4\n\n  .ql-direction\n    svg:last-child\n      display: none\n  .ql-direction.ql-active\n    svg:last-child\n      display: inline\n    svg:first-child\n      display: none\n\n  .ql-editor\n    h1\n      font-size: 2em\n    h2\n      font-size: 1.5em\n    h3\n      font-size: 1.17em\n    h4\n      font-size: 1em\n    h5\n      font-size: 0.83em\n    h6\n      font-size: 0.67em\n    a\n      text-decoration: underline\n    blockquote\n      border-left: 4px solid #ccc\n      margin-bottom: 5px\n      margin-top: 5px\n      padding-left: 16px\n    code, .ql-code-block-container\n      background-color: #f0f0f0\n      border-radius: 3px\n    .ql-code-block-container\n      margin-bottom: 5px\n      margin-top: 5px\n      padding: 5px 10px\n    code\n      font-size: 85%\n      padding: 2px 4px\n    .ql-code-block-container\n      background-color: #23241f\n      color: #f8f8f2\n      overflow: visible\n    img\n      max-width: 100%\n\n  .ql-picker\n    color: inactiveColor\n    display: inline-block\n    float: left\n    font-size: 14px\n    font-weight: 500\n    height: controlHeight\n    position: relative\n    vertical-align: middle\n  .ql-picker-label\n    cursor: pointer\n    display: inline-block\n    height: 100%\n    padding-left: 8px\n    padding-right: 2px\n    position: relative\n    width: 100%\n    &::before\n      display: inline-block\n      line-height: 22px\n  .ql-picker-options\n    background-color: backgroundColor\n    display: none\n    min-width: 100%\n    padding: 4px 8px\n    position: absolute\n    white-space: nowrap\n    .ql-picker-item\n      cursor: pointer\n      display: block\n      padding-bottom: 5px\n      padding-top: 5px\n  .ql-picker.ql-expanded\n    .ql-picker-label\n      color: borderColor\n      z-index: 2\n      .ql-fill\n        fill: borderColor\n      .ql-stroke\n        stroke: borderColor\n    .ql-picker-options\n      display: block\n      margin-top: -1px\n      top: 100%\n      z-index: 1\n\n  .ql-color-picker, .ql-icon-picker\n    width: controlHeight + 4\n    .ql-picker-label\n      padding: 2px 4px\n      svg\n        right: 4px\n  .ql-icon-picker\n    .ql-picker-options\n      padding: 4px 0px\n    .ql-picker-item\n      height: controlHeight\n      width: controlHeight\n      padding: 2px 4px\n  .ql-color-picker\n    .ql-picker-options\n      padding: inputPaddingHeight inputPaddingWidth\n      width: (colorItemSize + 2*colorItemMargin) * colorItemsPerRow + 2*inputPaddingWidth + 2  // +2 for the border\n    .ql-picker-item\n      border: 1px solid transparent\n      float: left\n      height: colorItemSize\n      margin: colorItemMargin\n      padding: 0px\n      width: colorItemSize\n\n  .ql-picker:not(.ql-color-picker):not(.ql-icon-picker)\n    svg\n      position: absolute\n      margin-top: -9px\n      right: 0\n      top: 50%\n      width: 18px\n\n  .ql-picker.ql-header, .ql-picker.ql-font, .ql-picker.ql-size\n    .ql-picker-label[data-label]:not([data-label='']),\n    .ql-picker-item[data-label]:not([data-label=''])\n      &::before\n        content: attr(data-label)\n\n  .ql-picker.ql-header\n    width: 98px\n    .ql-picker-label::before,\n    .ql-picker-item::before\n      content: 'Normal'\n    for num in (1..6)\n      .ql-picker-label[data-value=\\\"{num}\\\"]::before,\n      .ql-picker-item[data-value=\\\"{num}\\\"]::before\n        content: 'Heading ' + num\n    .ql-picker-item[data-value=\"1\"]::before\n      font-size: 2em\n    .ql-picker-item[data-value=\"2\"]::before\n      font-size: 1.5em\n    .ql-picker-item[data-value=\"3\"]::before\n      font-size: 1.17em\n    .ql-picker-item[data-value=\"4\"]::before\n      font-size: 1em\n    .ql-picker-item[data-value=\"5\"]::before\n      font-size: 0.83em\n    .ql-picker-item[data-value=\"6\"]::before\n      font-size: 0.67em\n\n  .ql-picker.ql-font\n    width: 108px\n    .ql-picker-label::before,\n    .ql-picker-item::before\n      content: 'Sans Serif'\n    .ql-picker-label[data-value=serif]::before,\n    .ql-picker-item[data-value=serif]::before\n      content: 'Serif'\n    .ql-picker-label[data-value=monospace]::before,\n    .ql-picker-item[data-value=monospace]::before\n      content: 'Monospace'\n    .ql-picker-item[data-value=serif]::before\n      font-family: Georgia, Times New Roman, serif\n    .ql-picker-item[data-value=monospace]::before\n      font-family: Monaco, Courier New, monospace\n\n  .ql-picker.ql-size\n    width: 98px\n    .ql-picker-label::before,\n    .ql-picker-item::before\n      content: 'Normal'\n    .ql-picker-label[data-value=small]::before,\n    .ql-picker-item[data-value=small]::before\n      content: 'Small'\n    .ql-picker-label[data-value=large]::before,\n    .ql-picker-item[data-value=large]::before\n      content: 'Large'\n    .ql-picker-label[data-value=huge]::before,\n    .ql-picker-item[data-value=huge]::before\n      content: 'Huge'\n    .ql-picker-item[data-value=small]::before\n      font-size: 10px\n    .ql-picker-item[data-value=large]::before\n      font-size: 18px\n    .ql-picker-item[data-value=huge]::before\n      font-size: 32px\n\n  .ql-color-picker.ql-background\n    .ql-picker-item\n      background-color: #fff\n  .ql-color-picker.ql-color\n    .ql-picker-item\n      background-color: #000\n\n.ql-code-block-container\n  position: relative\n  .ql-ui\n    right: 5px\n    top: 5px\n","tooltipMargin = 8px\n\n.ql-snow\n  .ql-tooltip\n    background-color: #fff\n    border: 1px solid borderColor\n    box-shadow: 0px 0px 5px shadowColor\n    color: textColor\n    padding: 5px 12px\n    white-space: nowrap\n    &::before\n      content: \"Visit URL:\"\n      line-height: 26px\n      margin-right: tooltipMargin\n    input[type=text]\n      display: none\n      border: 1px solid borderColor\n      font-size: 13px\n      height: 26px\n      margin: 0px\n      padding: 3px 5px\n      width: 170px\n    a.ql-preview\n      display: inline-block\n      max-width: 200px\n      overflow-x: hidden\n      text-overflow: ellipsis\n      vertical-align: top\n    a.ql-action::after\n      border-right: 1px solid borderColor\n      content: 'Edit'\n      margin-left: tooltipMargin*2\n      padding-right: tooltipMargin\n    a.ql-remove::before\n      content: 'Remove'\n      margin-left: tooltipMargin\n    a\n      line-height: 26px\n  .ql-tooltip.ql-editing\n    a.ql-preview, a.ql-remove\n      display: none\n    input[type=text]\n      display: inline-block\n    a.ql-action::after\n      border-right: 0px\n      content: 'Save'\n      padding-right: 0px\n  .ql-tooltip[data-mode=link]::before\n    content: \"Enter link:\"\n  .ql-tooltip[data-mode=formula]::before\n    content: \"Enter formula:\"\n  .ql-tooltip[data-mode=video]::before\n    content: \"Enter video:\"\n",".ql-toolbar.ql-snow\n  border: 1px solid borderColor\n  box-sizing: border-box\n  font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif\n  padding: 8px\n\n  .ql-formats\n    margin-right: 15px\n\n  .ql-picker-label\n    border: 1px solid transparent\n  .ql-picker-options\n    border: 1px solid transparent\n    box-shadow: rgba(0,0,0,0.2) 0 2px 8px\n  .ql-picker.ql-expanded\n    .ql-picker-label\n      border-color: borderColor\n    .ql-picker-options\n      border-color: borderColor\n\n  .ql-color-picker\n    .ql-picker-item.ql-selected, .ql-picker-item:hover\n      border-color: #000\n\n.ql-toolbar.ql-snow + .ql-container.ql-snow\n  border-top: 0px;\n","themeName = 'snow'\nactiveColor = #06c\nborderColor = #ccc\nbackgroundColor = #fff\ninactiveColor = #444\nshadowColor = #ddd\ntextColor = #444\n\n@import './core'\n@import './base'\n@import './snow/*'\n\n.ql-snow\n  a\n    color: activeColor\n\n.ql-container.ql-snow\n  border: 1px solid borderColor\n",".tipp-ql-wrapper {\n  height: 100%;\n  border-radius: 8px;\n  background: var(--color-panel);\n  border: 1px solid var(--gray-7);\n  --text-field-focus-color: transparent !important;\n\n  .editor-title-text-field {\n    box-shadow: none;\n    width: 100%;\n  }\n  .editor-title-text-field:focus {\n    box-shadow: none;\n  }\n\n  .rt-TextFieldRoot:where(.rt-variant-surface) {\n    --text-field-focus-color: transparent !important;\n  }\n  .ql-toolbar {\n    border: none;\n    border-top: 1px solid var(--gray-7);\n    border-bottom: 1px solid var(--gray-7);\n  }\n\n  .ql-container {\n    border: none;\n    width: 100%;\n  }\n}\n\n/** Write mode */\n.write-mode {\n  height: 100%;\n  max-height: calc(100% - 90px);\n  display: grid;\n  grid-template-rows: auto 1fr;\n\n  .ql-container {\n    height: var(--height);\n    max-height: var(--max-height);\n    min-height: var(--min-height);\n    overflow: auto;\n  }\n}\n\n/** Read mode */\n.read-mode.ql-container {\n  border: none;\n  width: 100%;\n  .ql-editor {\n    padding: 0 !important;\n    transition: 1s height;\n  }\n  .ql-editor.closed {\n    width: 100%;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    line-clamp: 2;\n    -webkit-box-orient: vertical;\n    word-break: break-word;\n  }\n}\n"]}

package/dist/read-card.cjs

@@ -93,8 +93,7 @@ function ReadCard(props) {
   const [className, setClassName] = (0, import_react2.useState)("closed");
   const [openBtnVisible, setOpenBtnVisible] = (0, import_react2.useState)(false);
   (0, import_react2.useEffect)(() => {
-    if (!ref.current)
-      return;
+    if (!ref.current) return;
     setOpenBtnVisible(ref.current.clientHeight < ref.current.scrollHeight);
     ref.current.style.height = `${ref.current.clientHeight}px`;
   }, [ref, content]);

package/dist/read-card.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/read-card.tsx","../src/html-container.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef, useState } from 'react';\nimport Dompurify from 'dompurify';\nimport {\n  AlertDialog,\n  Badge,\n  Button,\n  Card,\n  ChevronDownIcon,\n  ChevronUpIcon,\n  DotsVerticalIcon,\n  Flex,\n  Heading,\n  IconButton,\n  Link,\n  Typo,\n  Separator,\n  DropdownMenu,\n  Pencil1Icon,\n  TrashIcon,\n  Grid,\n  DownloadIcon,\n} from '@tipp/ui';\nimport QuillHtmlOutputContainer from './html-container';\nimport type { Attachment } from './type';\n\ninterface ReadCardProps {\n  onClickDelete?: () => void;\n  onClickEdit?: () => void;\n  content?: string;\n  title?: string;\n  writer?: string;\n  createAt?: Date;\n  files?: Attachment[];\n}\n\nexport function ReadCard(props: ReadCardProps): React.ReactElement {\n  const {\n    onClickDelete: propsOnClickDelete,\n    onClickEdit: propsOnClickEdit,\n    content = '',\n    title = '',\n    writer,\n    createAt,\n    files,\n  } = props;\n  const ref = useRef<HTMLDivElement>(null);\n  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);\n\n  const safeContent = useMemo(() => {\n    return Dompurify.sanitize(content || '');\n  }, [content]);\n\n  interface OptionItem {\n    title: string;\n    icon: React.ReactNode;\n    onClick: () => void;\n  }\n  const optionItems = useMemo<OptionItem[]>(() => {\n    const result: OptionItem[] = [];\n    if (propsOnClickEdit) {\n      result.push({\n        title: '수정하기',\n        icon: <Pencil1Icon />,\n        onClick: propsOnClickEdit,\n      });\n    }\n\n    if (propsOnClickDelete) {\n      result.push({\n        title: '삭제하기',\n        onClick: () => {\n          setDeleteDialogOpen(true);\n        },\n        icon: <TrashIcon />,\n      });\n    }\n\n    return result;\n  }, [propsOnClickDelete, propsOnClickEdit]);\n\n  const [className, setClassName] = useState<undefined | 'closed'>('closed');\n  const [openBtnVisible, setOpenBtnVisible] = useState(false);\n\n  useEffect(() => {\n    if (!ref.current) return;\n    setOpenBtnVisible(ref.current.clientHeight < ref.current.scrollHeight);\n    ref.current.style.height = `${ref.current.clientHeight}px`;\n  }, [ref, content]);\n\n  const renderOpenBtns = (): React.ReactNode => {\n    if (openBtnVisible) {\n      if (className) {\n        return (\n          <Button\n            color=\"gray\"\n            onClick={() => {\n              setClassName(undefined);\n              if (ref.current) {\n                ref.current.style.height = 'initial';\n              }\n            }}\n            size=\"small\"\n            variant=\"outline\"\n          >\n            펼치기\n            <ChevronDownIcon />\n          </Button>\n        );\n      }\n      return (\n        <Button\n          color=\"gray\"\n          onClick={() => {\n            setClassName('closed');\n          }}\n          size=\"small\"\n          variant=\"outline\"\n        >\n          접기\n          <ChevronUpIcon />\n        </Button>\n      );\n    }\n    return null;\n  };\n\n  return (\n    <Card size=\"2\">\n      <Grid columns=\"1fr auto\" width=\"100%\">\n        <Grid\n          align=\"center\"\n          columns={{ initial: '1', sm: 'auto 1fr' }}\n          gap=\"2\"\n          width=\"100%\"\n        >\n          <Heading variant=\"heading5\" weight=\"regular\">\n            {title}\n          </Heading>\n\n          <Flex\n            align=\"center\"\n            gap=\"4\"\n            justify={{ initial: 'start', sm: 'between' }}\n            width=\"100%\"\n          >\n            {writer ? (\n              <Badge color=\"neutral\" size=\"small\">{`작성자 : ${writer}`}</Badge>\n            ) : null}\n            {createAt ? (\n              <Typo\n                style={{ whiteSpace: 'nowrap' }}\n              >{`등록 ${createAt.getFullYear()}.${createAt.getMonth() + 1}.${createAt.getDate()} `}</Typo>\n            ) : null}\n          </Flex>\n\n          <AlertDialog.Root\n            onOpenChange={setDeleteDialogOpen}\n            open={deleteDialogOpen}\n          >\n            <AlertDialog.Content>\n              <AlertDialog.Title>노트를 삭제하시겠습니까?</AlertDialog.Title>\n              <AlertDialog.Description>\n                삭제된 노트는 복구할 수 없습니다. 삭제하시겠습니까?\n              </AlertDialog.Description>\n              <Flex gap=\"3\" justify=\"end\">\n                <AlertDialog.Cancel>\n                  <Button color=\"gray\" variant=\"outline\">\n                    취소\n                  </Button>\n                </AlertDialog.Cancel>\n                <AlertDialog.Action>\n                  <Button color=\"tomato\" onClick={propsOnClickDelete}>\n                    삭제\n                  </Button>\n                </AlertDialog.Action>\n              </Flex>\n            </AlertDialog.Content>\n          </AlertDialog.Root>\n        </Grid>\n\n        {/*  ... 옵션 버튼 */}\n        {optionItems.length ? (\n          <DropdownMenu.Root>\n            <DropdownMenu.Trigger>\n              <IconButton ml=\"2\" mt=\"1\" variant=\"ghost\">\n                <DotsVerticalIcon />\n              </IconButton>\n            </DropdownMenu.Trigger>\n            <DropdownMenu.Content>\n              {optionItems.map((item) => {\n                return (\n                  <DropdownMenu.Item key={item.title} onClick={item.onClick}>\n                    {item.icon}\n                    {item.title}\n                  </DropdownMenu.Item>\n                );\n              })}\n            </DropdownMenu.Content>\n          </DropdownMenu.Root>\n        ) : null}\n      </Grid>\n\n      {Boolean(files?.length) && (\n        <Flex direction=\"column\" gap=\"2\" mt=\"2\" width=\"100%\">\n          {files?.map((file) => {\n            return (\n              <Link\n                download={file.fileName}\n                href={file.url}\n                key={file.createdAt?.valueOf() + file.fileName}\n                target=\"_blank\"\n              >\n                <IconButton style={{ width: '100%' }} variant=\"surface\">\n                  <Flex align=\"center\" gap=\"2\" pl=\"2\" width=\"100%\">\n                    <DownloadIcon />\n                    <Typo>{file.fileName}</Typo>\n                  </Flex>\n                </IconButton>\n              </Link>\n            );\n          })}\n        </Flex>\n      )}\n\n      {content ? (\n        <>\n          <Separator mb=\"4\" mt=\"4\" style={{ width: '100%' }} />\n\n          <Flex align=\"center\" direction=\"column\" gap=\"3\">\n            <QuillHtmlOutputContainer\n              className={className}\n              html={safeContent}\n              ref={ref}\n            />\n            {renderOpenBtns()}\n          </Flex>\n        </>\n      ) : null}\n    </Card>\n  );\n}\n","import React, { forwardRef } from 'react';\n\ninterface QuillHtmlOutputContainerProps {\n  html: string;\n  className?: string;\n}\n\nconst QuillHtmlOutputContainer = forwardRef<\n  HTMLDivElement,\n  QuillHtmlOutputContainerProps\n>(({ html, className }, ref): React.ReactElement => {\n  return (\n    <div className=\"ql-snow ql-container read-mode\">\n      <div\n        className={`ql-editor ${className || ''}`}\n        dangerouslySetInnerHTML={{ __html: html }}\n        ref={ref}\n      />\n    </div>\n  );\n});\n\nQuillHtmlOutputContainer.displayName = 'QuillHtmlOutputContainer';\n\nexport default QuillHtmlOutputContainer;\n"],"mappings":"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","names":["import_react","import_jsx_runtime","Dompurify"]}
+{"version":3,"sources":["../src/read-card.tsx","../src/html-container.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef, useState } from 'react';\nimport Dompurify from 'dompurify';\nimport {\n  AlertDialog,\n  Badge,\n  Button,\n  Card,\n  ChevronDownIcon,\n  ChevronUpIcon,\n  DotsVerticalIcon,\n  Flex,\n  Heading,\n  IconButton,\n  Link,\n  Typo,\n  Separator,\n  DropdownMenu,\n  Pencil1Icon,\n  TrashIcon,\n  Grid,\n  DownloadIcon,\n} from '@tipp/ui';\nimport QuillHtmlOutputContainer from './html-container';\nimport type { Attachment } from './type';\n\ninterface ReadCardProps {\n  onClickDelete?: () => void;\n  onClickEdit?: () => void;\n  content?: string;\n  title?: string;\n  writer?: string;\n  createAt?: Date;\n  files?: Attachment[];\n}\n\nexport function ReadCard(props: ReadCardProps): React.ReactNode {\n  const {\n    onClickDelete: propsOnClickDelete,\n    onClickEdit: propsOnClickEdit,\n    content = '',\n    title = '',\n    writer,\n    createAt,\n    files,\n  } = props;\n  const ref = useRef<HTMLDivElement>(null);\n  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);\n\n  const safeContent = useMemo(() => {\n    return Dompurify.sanitize(content || '');\n  }, [content]);\n\n  interface OptionItem {\n    title: string;\n    icon: React.ReactNode;\n    onClick: () => void;\n  }\n  const optionItems = useMemo<OptionItem[]>(() => {\n    const result: OptionItem[] = [];\n    if (propsOnClickEdit) {\n      result.push({\n        title: '수정하기',\n        icon: <Pencil1Icon />,\n        onClick: propsOnClickEdit,\n      });\n    }\n\n    if (propsOnClickDelete) {\n      result.push({\n        title: '삭제하기',\n        onClick: () => {\n          setDeleteDialogOpen(true);\n        },\n        icon: <TrashIcon />,\n      });\n    }\n\n    return result;\n  }, [propsOnClickDelete, propsOnClickEdit]);\n\n  const [className, setClassName] = useState<undefined | 'closed'>('closed');\n  const [openBtnVisible, setOpenBtnVisible] = useState(false);\n\n  useEffect(() => {\n    if (!ref.current) return;\n    setOpenBtnVisible(ref.current.clientHeight < ref.current.scrollHeight);\n    ref.current.style.height = `${ref.current.clientHeight}px`;\n  }, [ref, content]);\n\n  const renderOpenBtns = (): React.ReactNode => {\n    if (openBtnVisible) {\n      if (className) {\n        return (\n          <Button\n            color=\"gray\"\n            onClick={() => {\n              setClassName(undefined);\n              if (ref.current) {\n                ref.current.style.height = 'initial';\n              }\n            }}\n            size=\"small\"\n            variant=\"outline\"\n          >\n            펼치기\n            <ChevronDownIcon />\n          </Button>\n        );\n      }\n      return (\n        <Button\n          color=\"gray\"\n          onClick={() => {\n            setClassName('closed');\n          }}\n          size=\"small\"\n          variant=\"outline\"\n        >\n          접기\n          <ChevronUpIcon />\n        </Button>\n      );\n    }\n    return null;\n  };\n\n  return (\n    <Card size=\"2\">\n      <Grid columns=\"1fr auto\" width=\"100%\">\n        <Grid\n          align=\"center\"\n          columns={{ initial: '1', sm: 'auto 1fr' }}\n          gap=\"2\"\n          width=\"100%\"\n        >\n          <Heading variant=\"heading5\" weight=\"regular\">\n            {title}\n          </Heading>\n\n          <Flex\n            align=\"center\"\n            gap=\"4\"\n            justify={{ initial: 'start', sm: 'between' }}\n            width=\"100%\"\n          >\n            {writer ? (\n              <Badge color=\"neutral\" size=\"small\">{`작성자 : ${writer}`}</Badge>\n            ) : null}\n            {createAt ? (\n              <Typo\n                style={{ whiteSpace: 'nowrap' }}\n              >{`등록 ${createAt.getFullYear()}.${createAt.getMonth() + 1}.${createAt.getDate()} `}</Typo>\n            ) : null}\n          </Flex>\n\n          <AlertDialog.Root\n            onOpenChange={setDeleteDialogOpen}\n            open={deleteDialogOpen}\n          >\n            <AlertDialog.Content>\n              <AlertDialog.Title>노트를 삭제하시겠습니까?</AlertDialog.Title>\n              <AlertDialog.Description>\n                삭제된 노트는 복구할 수 없습니다. 삭제하시겠습니까?\n              </AlertDialog.Description>\n              <Flex gap=\"3\" justify=\"end\">\n                <AlertDialog.Cancel>\n                  <Button color=\"gray\" variant=\"outline\">\n                    취소\n                  </Button>\n                </AlertDialog.Cancel>\n                <AlertDialog.Action>\n                  <Button color=\"tomato\" onClick={propsOnClickDelete}>\n                    삭제\n                  </Button>\n                </AlertDialog.Action>\n              </Flex>\n            </AlertDialog.Content>\n          </AlertDialog.Root>\n        </Grid>\n\n        {/*  ... 옵션 버튼 */}\n        {optionItems.length ? (\n          <DropdownMenu.Root>\n            <DropdownMenu.Trigger>\n              <IconButton ml=\"2\" mt=\"1\" variant=\"ghost\">\n                <DotsVerticalIcon />\n              </IconButton>\n            </DropdownMenu.Trigger>\n            <DropdownMenu.Content>\n              {optionItems.map((item) => {\n                return (\n                  <DropdownMenu.Item key={item.title} onClick={item.onClick}>\n                    {item.icon}\n                    {item.title}\n                  </DropdownMenu.Item>\n                );\n              })}\n            </DropdownMenu.Content>\n          </DropdownMenu.Root>\n        ) : null}\n      </Grid>\n\n      {Boolean(files?.length) && (\n        <Flex direction=\"column\" gap=\"2\" mt=\"2\" width=\"100%\">\n          {files?.map((file) => {\n            return (\n              <Link\n                download={file.fileName}\n                href={file.url}\n                key={file.createdAt?.valueOf() + file.fileName}\n                target=\"_blank\"\n              >\n                <IconButton style={{ width: '100%' }} variant=\"surface\">\n                  <Flex align=\"center\" gap=\"2\" pl=\"2\" width=\"100%\">\n                    <DownloadIcon />\n                    <Typo>{file.fileName}</Typo>\n                  </Flex>\n                </IconButton>\n              </Link>\n            );\n          })}\n        </Flex>\n      )}\n\n      {content ? (\n        <>\n          <Separator mb=\"4\" mt=\"4\" style={{ width: '100%' }} />\n\n          <Flex align=\"center\" direction=\"column\" gap=\"3\">\n            <QuillHtmlOutputContainer\n              className={className}\n              html={safeContent}\n              ref={ref}\n            />\n            {renderOpenBtns()}\n          </Flex>\n        </>\n      ) : null}\n    </Card>\n  );\n}\n","import React, { forwardRef } from 'react';\n\ninterface QuillHtmlOutputContainerProps {\n  html: string;\n  className?: string;\n}\n\nconst QuillHtmlOutputContainer = forwardRef<\n  HTMLDivElement,\n  QuillHtmlOutputContainerProps\n>(({ html, className }, ref): React.ReactNode => {\n  return (\n    <div className=\"ql-snow ql-container read-mode\">\n      <div\n        className={`ql-editor ${className || ''}`}\n        dangerouslySetInnerHTML={{ __html: html }}\n        ref={ref}\n      />\n    </div>\n  );\n});\n\nQuillHtmlOutputContainer.displayName = 'QuillHtmlOutputContainer';\n\nexport default QuillHtmlOutputContainer;\n"],"mappings":"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","names":["import_react","import_jsx_runtime","Dompurify"]}

package/dist/read-card.d.cts

@@ -10,6 +10,6 @@ interface ReadCardProps {
     createAt?: Date;
     files?: Attachment[];
 }
-declare function ReadCard(props: ReadCardProps): React.ReactElement;
+declare function ReadCard(props: ReadCardProps): React.ReactNode;
 
 export { ReadCard };

package/dist/read-card.d.ts

@@ -10,6 +10,6 @@ interface ReadCardProps {
     createAt?: Date;
     files?: Attachment[];
 }
-declare function ReadCard(props: ReadCardProps): React.ReactElement;
+declare function ReadCard(props: ReadCardProps): React.ReactNode;
 
 export { ReadCard };

package/dist/read-card.js

@@ -1,7 +1,7 @@
 import {
   html_container_default
-} from "./chunk-B2YNOJG7.js";
-import "./chunk-AYPEDHDL.js";
+} from "./chunk-6W7GMBAM.js";
+import "./chunk-WH3MP2R3.js";
 
 // src/read-card.tsx
 import { useEffect, useMemo, useRef, useState } from "react";
@@ -65,8 +65,7 @@ function ReadCard(props) {
   const [className, setClassName] = useState("closed");
   const [openBtnVisible, setOpenBtnVisible] = useState(false);
   useEffect(() => {
-    if (!ref.current)
-      return;
+    if (!ref.current) return;
     setOpenBtnVisible(ref.current.clientHeight < ref.current.scrollHeight);
     ref.current.style.height = `${ref.current.clientHeight}px`;
   }, [ref, content]);

package/dist/read-card.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/read-card.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef, useState } from 'react';\nimport Dompurify from 'dompurify';\nimport {\n  AlertDialog,\n  Badge,\n  Button,\n  Card,\n  ChevronDownIcon,\n  ChevronUpIcon,\n  DotsVerticalIcon,\n  Flex,\n  Heading,\n  IconButton,\n  Link,\n  Typo,\n  Separator,\n  DropdownMenu,\n  Pencil1Icon,\n  TrashIcon,\n  Grid,\n  DownloadIcon,\n} from '@tipp/ui';\nimport QuillHtmlOutputContainer from './html-container';\nimport type { Attachment } from './type';\n\ninterface ReadCardProps {\n  onClickDelete?: () => void;\n  onClickEdit?: () => void;\n  content?: string;\n  title?: string;\n  writer?: string;\n  createAt?: Date;\n  files?: Attachment[];\n}\n\nexport function ReadCard(props: ReadCardProps): React.ReactElement {\n  const {\n    onClickDelete: propsOnClickDelete,\n    onClickEdit: propsOnClickEdit,\n    content = '',\n    title = '',\n    writer,\n    createAt,\n    files,\n  } = props;\n  const ref = useRef<HTMLDivElement>(null);\n  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);\n\n  const safeContent = useMemo(() => {\n    return Dompurify.sanitize(content || '');\n  }, [content]);\n\n  interface OptionItem {\n    title: string;\n    icon: React.ReactNode;\n    onClick: () => void;\n  }\n  const optionItems = useMemo<OptionItem[]>(() => {\n    const result: OptionItem[] = [];\n    if (propsOnClickEdit) {\n      result.push({\n        title: '수정하기',\n        icon: <Pencil1Icon />,\n        onClick: propsOnClickEdit,\n      });\n    }\n\n    if (propsOnClickDelete) {\n      result.push({\n        title: '삭제하기',\n        onClick: () => {\n          setDeleteDialogOpen(true);\n        },\n        icon: <TrashIcon />,\n      });\n    }\n\n    return result;\n  }, [propsOnClickDelete, propsOnClickEdit]);\n\n  const [className, setClassName] = useState<undefined | 'closed'>('closed');\n  const [openBtnVisible, setOpenBtnVisible] = useState(false);\n\n  useEffect(() => {\n    if (!ref.current) return;\n    setOpenBtnVisible(ref.current.clientHeight < ref.current.scrollHeight);\n    ref.current.style.height = `${ref.current.clientHeight}px`;\n  }, [ref, content]);\n\n  const renderOpenBtns = (): React.ReactNode => {\n    if (openBtnVisible) {\n      if (className) {\n        return (\n          <Button\n            color=\"gray\"\n            onClick={() => {\n              setClassName(undefined);\n              if (ref.current) {\n                ref.current.style.height = 'initial';\n              }\n            }}\n            size=\"small\"\n            variant=\"outline\"\n          >\n            펼치기\n            <ChevronDownIcon />\n          </Button>\n        );\n      }\n      return (\n        <Button\n          color=\"gray\"\n          onClick={() => {\n            setClassName('closed');\n          }}\n          size=\"small\"\n          variant=\"outline\"\n        >\n          접기\n          <ChevronUpIcon />\n        </Button>\n      );\n    }\n    return null;\n  };\n\n  return (\n    <Card size=\"2\">\n      <Grid columns=\"1fr auto\" width=\"100%\">\n        <Grid\n          align=\"center\"\n          columns={{ initial: '1', sm: 'auto 1fr' }}\n          gap=\"2\"\n          width=\"100%\"\n        >\n          <Heading variant=\"heading5\" weight=\"regular\">\n            {title}\n          </Heading>\n\n          <Flex\n            align=\"center\"\n            gap=\"4\"\n            justify={{ initial: 'start', sm: 'between' }}\n            width=\"100%\"\n          >\n            {writer ? (\n              <Badge color=\"neutral\" size=\"small\">{`작성자 : ${writer}`}</Badge>\n            ) : null}\n            {createAt ? (\n              <Typo\n                style={{ whiteSpace: 'nowrap' }}\n              >{`등록 ${createAt.getFullYear()}.${createAt.getMonth() + 1}.${createAt.getDate()} `}</Typo>\n            ) : null}\n          </Flex>\n\n          <AlertDialog.Root\n            onOpenChange={setDeleteDialogOpen}\n            open={deleteDialogOpen}\n          >\n            <AlertDialog.Content>\n              <AlertDialog.Title>노트를 삭제하시겠습니까?</AlertDialog.Title>\n              <AlertDialog.Description>\n                삭제된 노트는 복구할 수 없습니다. 삭제하시겠습니까?\n              </AlertDialog.Description>\n              <Flex gap=\"3\" justify=\"end\">\n                <AlertDialog.Cancel>\n                  <Button color=\"gray\" variant=\"outline\">\n                    취소\n                  </Button>\n                </AlertDialog.Cancel>\n                <AlertDialog.Action>\n                  <Button color=\"tomato\" onClick={propsOnClickDelete}>\n                    삭제\n                  </Button>\n                </AlertDialog.Action>\n              </Flex>\n            </AlertDialog.Content>\n          </AlertDialog.Root>\n        </Grid>\n\n        {/*  ... 옵션 버튼 */}\n        {optionItems.length ? (\n          <DropdownMenu.Root>\n            <DropdownMenu.Trigger>\n              <IconButton ml=\"2\" mt=\"1\" variant=\"ghost\">\n                <DotsVerticalIcon />\n              </IconButton>\n            </DropdownMenu.Trigger>\n            <DropdownMenu.Content>\n              {optionItems.map((item) => {\n                return (\n                  <DropdownMenu.Item key={item.title} onClick={item.onClick}>\n                    {item.icon}\n                    {item.title}\n                  </DropdownMenu.Item>\n                );\n              })}\n            </DropdownMenu.Content>\n          </DropdownMenu.Root>\n        ) : null}\n      </Grid>\n\n      {Boolean(files?.length) && (\n        <Flex direction=\"column\" gap=\"2\" mt=\"2\" width=\"100%\">\n          {files?.map((file) => {\n            return (\n              <Link\n                download={file.fileName}\n                href={file.url}\n                key={file.createdAt?.valueOf() + file.fileName}\n                target=\"_blank\"\n              >\n                <IconButton style={{ width: '100%' }} variant=\"surface\">\n                  <Flex align=\"center\" gap=\"2\" pl=\"2\" width=\"100%\">\n                    <DownloadIcon />\n                    <Typo>{file.fileName}</Typo>\n                  </Flex>\n                </IconButton>\n              </Link>\n            );\n          })}\n        </Flex>\n      )}\n\n      {content ? (\n        <>\n          <Separator mb=\"4\" mt=\"4\" style={{ width: '100%' }} />\n\n          <Flex align=\"center\" direction=\"column\" gap=\"3\">\n            <QuillHtmlOutputContainer\n              className={className}\n              html={safeContent}\n              ref={ref}\n            />\n            {renderOpenBtns()}\n          </Flex>\n        </>\n      ) : null}\n    </Card>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/read-card.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef, useState } from 'react';\nimport Dompurify from 'dompurify';\nimport {\n  AlertDialog,\n  Badge,\n  Button,\n  Card,\n  ChevronDownIcon,\n  ChevronUpIcon,\n  DotsVerticalIcon,\n  Flex,\n  Heading,\n  IconButton,\n  Link,\n  Typo,\n  Separator,\n  DropdownMenu,\n  Pencil1Icon,\n  TrashIcon,\n  Grid,\n  DownloadIcon,\n} from '@tipp/ui';\nimport QuillHtmlOutputContainer from './html-container';\nimport type { Attachment } from './type';\n\ninterface ReadCardProps {\n  onClickDelete?: () => void;\n  onClickEdit?: () => void;\n  content?: string;\n  title?: string;\n  writer?: string;\n  createAt?: Date;\n  files?: Attachment[];\n}\n\nexport function ReadCard(props: ReadCardProps): React.ReactNode {\n  const {\n    onClickDelete: propsOnClickDelete,\n    onClickEdit: propsOnClickEdit,\n    content = '',\n    title = '',\n    writer,\n    createAt,\n    files,\n  } = props;\n  const ref = useRef<HTMLDivElement>(null);\n  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);\n\n  const safeContent = useMemo(() => {\n    return Dompurify.sanitize(content || '');\n  }, [content]);\n\n  interface OptionItem {\n    title: string;\n    icon: React.ReactNode;\n    onClick: () => void;\n  }\n  const optionItems = useMemo<OptionItem[]>(() => {\n    const result: OptionItem[] = [];\n    if (propsOnClickEdit) {\n      result.push({\n        title: '수정하기',\n        icon: <Pencil1Icon />,\n        onClick: propsOnClickEdit,\n      });\n    }\n\n    if (propsOnClickDelete) {\n      result.push({\n        title: '삭제하기',\n        onClick: () => {\n          setDeleteDialogOpen(true);\n        },\n        icon: <TrashIcon />,\n      });\n    }\n\n    return result;\n  }, [propsOnClickDelete, propsOnClickEdit]);\n\n  const [className, setClassName] = useState<undefined | 'closed'>('closed');\n  const [openBtnVisible, setOpenBtnVisible] = useState(false);\n\n  useEffect(() => {\n    if (!ref.current) return;\n    setOpenBtnVisible(ref.current.clientHeight < ref.current.scrollHeight);\n    ref.current.style.height = `${ref.current.clientHeight}px`;\n  }, [ref, content]);\n\n  const renderOpenBtns = (): React.ReactNode => {\n    if (openBtnVisible) {\n      if (className) {\n        return (\n          <Button\n            color=\"gray\"\n            onClick={() => {\n              setClassName(undefined);\n              if (ref.current) {\n                ref.current.style.height = 'initial';\n              }\n            }}\n            size=\"small\"\n            variant=\"outline\"\n          >\n            펼치기\n            <ChevronDownIcon />\n          </Button>\n        );\n      }\n      return (\n        <Button\n          color=\"gray\"\n          onClick={() => {\n            setClassName('closed');\n          }}\n          size=\"small\"\n          variant=\"outline\"\n        >\n          접기\n          <ChevronUpIcon />\n        </Button>\n      );\n    }\n    return null;\n  };\n\n  return (\n    <Card size=\"2\">\n      <Grid columns=\"1fr auto\" width=\"100%\">\n        <Grid\n          align=\"center\"\n          columns={{ initial: '1', sm: 'auto 1fr' }}\n          gap=\"2\"\n          width=\"100%\"\n        >\n          <Heading variant=\"heading5\" weight=\"regular\">\n            {title}\n          </Heading>\n\n          <Flex\n            align=\"center\"\n            gap=\"4\"\n            justify={{ initial: 'start', sm: 'between' }}\n            width=\"100%\"\n          >\n            {writer ? (\n              <Badge color=\"neutral\" size=\"small\">{`작성자 : ${writer}`}</Badge>\n            ) : null}\n            {createAt ? (\n              <Typo\n                style={{ whiteSpace: 'nowrap' }}\n              >{`등록 ${createAt.getFullYear()}.${createAt.getMonth() + 1}.${createAt.getDate()} `}</Typo>\n            ) : null}\n          </Flex>\n\n          <AlertDialog.Root\n            onOpenChange={setDeleteDialogOpen}\n            open={deleteDialogOpen}\n          >\n            <AlertDialog.Content>\n              <AlertDialog.Title>노트를 삭제하시겠습니까?</AlertDialog.Title>\n              <AlertDialog.Description>\n                삭제된 노트는 복구할 수 없습니다. 삭제하시겠습니까?\n              </AlertDialog.Description>\n              <Flex gap=\"3\" justify=\"end\">\n                <AlertDialog.Cancel>\n                  <Button color=\"gray\" variant=\"outline\">\n                    취소\n                  </Button>\n                </AlertDialog.Cancel>\n                <AlertDialog.Action>\n                  <Button color=\"tomato\" onClick={propsOnClickDelete}>\n                    삭제\n                  </Button>\n                </AlertDialog.Action>\n              </Flex>\n            </AlertDialog.Content>\n          </AlertDialog.Root>\n        </Grid>\n\n        {/*  ... 옵션 버튼 */}\n        {optionItems.length ? (\n          <DropdownMenu.Root>\n            <DropdownMenu.Trigger>\n              <IconButton ml=\"2\" mt=\"1\" variant=\"ghost\">\n                <DotsVerticalIcon />\n              </IconButton>\n            </DropdownMenu.Trigger>\n            <DropdownMenu.Content>\n              {optionItems.map((item) => {\n                return (\n                  <DropdownMenu.Item key={item.title} onClick={item.onClick}>\n                    {item.icon}\n                    {item.title}\n                  </DropdownMenu.Item>\n                );\n              })}\n            </DropdownMenu.Content>\n          </DropdownMenu.Root>\n        ) : null}\n      </Grid>\n\n      {Boolean(files?.length) && (\n        <Flex direction=\"column\" gap=\"2\" mt=\"2\" width=\"100%\">\n          {files?.map((file) => {\n            return (\n              <Link\n                download={file.fileName}\n                href={file.url}\n                key={file.createdAt?.valueOf() + file.fileName}\n                target=\"_blank\"\n              >\n                <IconButton style={{ width: '100%' }} variant=\"surface\">\n                  <Flex align=\"center\" gap=\"2\" pl=\"2\" width=\"100%\">\n                    <DownloadIcon />\n                    <Typo>{file.fileName}</Typo>\n                  </Flex>\n                </IconButton>\n              </Link>\n            );\n          })}\n        </Flex>\n      )}\n\n      {content ? (\n        <>\n          <Separator mb=\"4\" mt=\"4\" style={{ width: '100%' }} />\n\n          <Flex align=\"center\" direction=\"column\" gap=\"3\">\n            <QuillHtmlOutputContainer\n              className={className}\n              html={safeContent}\n              ref={ref}\n            />\n            {renderOpenBtns()}\n          </Flex>\n        </>\n      ) : null}\n    </Card>\n  );\n}\n"],"mappings":"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","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tipp/ui-quill-editor",
-  "version": "1.4.47",
+  "version": "2.0.0",
   "private": false,
   "description": "tipp 디자인 시스템이 적용된  quillEditor 패키지, quillEditor의 사이즈가 커서 별도 패키지로 분리했습니다.",
   "sideEffects": false,
@@ -37,16 +37,16 @@
   ],
   "dependencies": {
     "dompurify": "^3.1.7",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-quill": "^2.0.0",
-    "@tipp/ui": "1.6.34"
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-quill-new": "^3.4.6",
+    "@tipp/ui": "2.0.0"
   },
   "devDependencies": {
     "@types/dompurify": "^3.0.5",
     "@types/lodash-es": "^4.17.12",
-    "@types/react": "^18.2.61",
-    "@types/react-dom": "^18.2.19",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "autoprefixer": "10.4.19",
     "eslint": "^8.57.0",
     "postcss": "8.4.33",
@@ -58,7 +58,7 @@
     "postcss-nesting": "12.0.2",
     "tsup": "^8.0.2",
     "typescript": "^5.3.3",
-    "@tipp/eslint-config": "1.0.1",
+    "@tipp/eslint-config": "1.0.5",
     "@tipp/typescript-config": "1.0.1"
   },
   "scripts": {

package/src/editor.tsx

@@ -12,11 +12,10 @@ import {
   toast,
   FileIcon,
 } from '@tipp/ui';
-import type { ReactQuillProps } from 'react-quill';
-import ReactQuill from 'react-quill';
+import ReactQuill from 'react-quill-new';
 import type { Attachment } from './type';
 
-export interface TippEditorProps extends ReactQuillProps {
+export interface TippEditorProps extends ReactQuill.ReactQuillProps {
   defaultTitle?: string;
   defaultValue?: string;
   defaultAttachedFiles?: Attachment[];
@@ -44,7 +43,7 @@ export interface TippEditorProps extends ReactQuillProps {
 }
 
 export const Editor = forwardRef<ReactQuill, TippEditorProps>(
-  (props, ref): React.ReactElement => {
+  (props, ref): React.ReactNode => {
     const {
       defaultAttachedFiles,
       defaultTitle,

package/src/html-container.tsx

@@ -8,7 +8,7 @@ interface QuillHtmlOutputContainerProps {
 const QuillHtmlOutputContainer = forwardRef<
   HTMLDivElement,
   QuillHtmlOutputContainerProps
->(({ html, className }, ref): React.ReactElement => {
+>(({ html, className }, ref): React.ReactNode => {
   return (
     <div className="ql-snow ql-container read-mode">
       <div

package/src/read-card.tsx

@@ -33,7 +33,7 @@ interface ReadCardProps {
   files?: Attachment[];
 }
 
-export function ReadCard(props: ReadCardProps): React.ReactElement {
+export function ReadCard(props: ReadCardProps): React.ReactNode {
   const {
     onClickDelete: propsOnClickDelete,
     onClickEdit: propsOnClickEdit,

package/dist/chunk-B2YNOJG7.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/html-container.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\n\ninterface QuillHtmlOutputContainerProps {\n  html: string;\n  className?: string;\n}\n\nconst QuillHtmlOutputContainer = forwardRef<\n  HTMLDivElement,\n  QuillHtmlOutputContainerProps\n>(({ html, className }, ref): React.ReactElement => {\n  return (\n    <div className=\"ql-snow ql-container read-mode\">\n      <div\n        className={`ql-editor ${className || ''}`}\n        dangerouslySetInnerHTML={{ __html: html }}\n        ref={ref}\n      />\n    </div>\n  );\n});\n\nQuillHtmlOutputContainer.displayName = 'QuillHtmlOutputContainer';\n\nexport default QuillHtmlOutputContainer;\n"],"mappings":";AAAA,SAAgB,kBAAkB;AAa5B;AANN,IAAM,2BAA2B,WAG/B,CAAC,EAAE,MAAM,UAAU,GAAG,QAA4B;AAClD,SACE,oBAAC,SAAI,WAAU,kCACb;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,aAAa,aAAa,EAAE;AAAA,MACvC,yBAAyB,EAAE,QAAQ,KAAK;AAAA,MACxC;AAAA;AAAA,EACF,GACF;AAEJ,CAAC;AAED,yBAAyB,cAAc;AAEvC,IAAO,yBAAQ;","names":[]}