playbook_ui 14.1.0.pre.alpha.PA1477timestampkit3601 → 14.1.0.pre.alpha.PBNTR449rtepreviewerrails3605

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b32c41e2625eea89ee6d671ece56d4d4924876e36e62147d4d084e8437a979b6
-  data.tar.gz: fa213c730648a601b22a7bce64ce0fbb280f69b17b37bb16f2bb2ce8350a2747
+  metadata.gz: a8d134303f815c6e0076c01a0aa625cda4c97ceff14ec8eff52b2716ebbb60a8
+  data.tar.gz: 1188d83da657ab95a2c0fb418f04734f2039c73278e1191fc8b75b14a37348f4
 SHA512:
-  metadata.gz: 829ba2957858c5ab84f149c949b772fe19be179440ea1f8bf86cda41dbf2b91b6100fbd8c9b3c562b7766f6e6711e8a65db97b83603ab3e1ec940f584f36e1c5
-  data.tar.gz: 654fa901ba9fc4136daf62d5daf0c160bebb1462b56f28c5e990e3405b0d9393f48fdd08794cf205925e3dd5390aaaca59054bce941d500a1e9a2440264876a9
+  metadata.gz: d04fdd2687e6accfad40120bbeba65830b7be5c3a15157d21a2ed1cd7b4d0c13202179cf5eeece62f5a7f21559e79af4da3760f7b83ef76ad70c7df607563a75
+  data.tar.gz: 173ab72b24320b444d7f5930fd41e2fae8a2122bacf85e46f142ac8860d05d12dcee0111bcd730ebbdba5586fdceab590667b7c560f921218140e46803b46f06

data/app/pb_kits/playbook/pb_rich_text_editor/_previewer_mixin.scss

@@ -3,18 +3,20 @@
 @import "../tokens/spacing";
 @import "../tokens/typography";
 
-@mixin preview_first_child {
+
+// Tiptap mixins section (React Advanced Editor)
+@mixin preview_tiptap_first_child {
     :first-child {
         margin-top: 0;
     }
 }
 
-@mixin preview_p {
+@mixin preview_tiptap_p {
     margin: 1rem 0 0 0;
     min-height: 1rem;
 }
 
-@mixin preview_code {
+@mixin preview_tiptap_code {
     font-family: monospace;
     background: $bg_light;
     padding: 0.1rem 0.3rem;
@@ -23,7 +25,7 @@
     overflow: hidden;
 }
 
-@mixin preview_pre_codeblock {
+@mixin preview_tiptap_pre_codeblock {
     display: inline-block;
     width: 100%;
     vertical-align: top;
@@ -44,7 +46,7 @@
     }
 }
 
-@mixin preview_a {
+@mixin preview_tiptap_a {
     color: $primary;
     border-bottom: 1px solid $primary;
     &:hover {
@@ -53,7 +55,7 @@
     }
 }
 
-@mixin preview_blockquote {
+@mixin preview_tiptap_blockquote {
     font-size: $font_larger;
     padding: $space_sm $space_md;
     font-style: italic;
@@ -63,7 +65,7 @@
     }
 }
 
-@mixin preview_h1 {
+@mixin preview_tiptap_h1 {
     font-size: $text_largest;
     line-height: $text_larger;
     font-weight: $bolder;
@@ -71,7 +73,7 @@
     margin: 2.1rem 0 0 0;
 }
 
-@mixin preview_h2 {
+@mixin preview_tiptap_h2 {
     font-size: $text_larger;
     line-height: $text_larger;
     font-weight: $bolder;
@@ -79,7 +81,7 @@
     margin: 1.9rem 0 0 0;
 }
 
-@mixin preview_h3 {
+@mixin preview_tiptap_h3 {
     font-size: $text_large;
     line-height: $text_large;
     font-weight: $bolder;
@@ -87,7 +89,7 @@
     margin: 1.7rem 0 0 0;
 }
 
-@mixin preview_smaller_headings {
+@mixin preview_tiptap_smaller_headings {
     font-size: $text_base;
     line-height: $text_base;
     letter-spacing: $lspace_tight;
@@ -95,7 +97,7 @@
     margin: 1rem 0 0 0;
 }
 
-@mixin preview_hr {
+@mixin preview_tiptap_hr {
     margin: 2.2rem 0;
     box-sizing: content-box;
     overflow: hidden;
@@ -107,7 +109,7 @@
     border: 0; 
 }
 
-@mixin preview_ol {
+@mixin preview_tiptap_ol {
     margin: 1rem 0 0 0;
     padding-left: $space_md;
     list-style: decimal;
@@ -119,7 +121,7 @@
     }
 }
 
-@mixin preview_ul {
+@mixin preview_tiptap_ul {
     list-style-position: disc;
     margin: 1rem 0 0 0;
     padding-left: $space_md;
@@ -130,3 +132,37 @@
       }
     }
 }
+
+// Trix mixins section (Rails and React default editor)
+@mixin preview_trix_div {
+    line-height: 1.4;
+}
+
+@mixin preview_trix_h1 {
+    font-size: 2em;
+    line-height: 1.4; 
+}
+@mixin preview_trix_blockquote {
+    border: 0 solid #ccc;
+    border-left-width: 0.3em;
+    margin-left: 0.3em;
+    padding-left: 0.6em; 
+    line-height: 1.4;
+}
+
+@mixin preview_trix_li {
+    line-height: 1.4;
+    margin-left: $space_sm;
+}
+
+@mixin preview_trix_pre {
+    display: inline-block;
+    width: 100%;
+    vertical-align: top;
+    font-family: monospace;
+    font-size: 0.9em;
+    padding: 0.5em;
+    white-space: pre;
+    background-color: #eee;
+    overflow-x: auto; 
+}

data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.scss

@@ -10,18 +10,6 @@
 @import "./trix_styles";
 @import "./tiptap_styles";
 
-.trix-content pre {
-  display: inline-block;
-  width: 100%;
-  vertical-align: top;
-  font-family: monospace;
-  font-size: 0.9em;
-  padding: 0.5em;
-  white-space: pre;
-  background-color: #ccc !important;
-  color: black !important;
-  overflow-x: auto;
-}
 [class^=pb_rich_text_editor_kit] {
   // Disables File Attatchment Button in Toolbar
   trix-toolbar [data-trix-button-group="file-tools"] {

data/app/pb_kits/playbook/pb_rich_text_editor/_tiptap_styles.scss

@@ -86,44 +86,44 @@
     }
 
     code {
-      @include preview_code;
+      @include preview_tiptap_code;
     }
 
     pre {
-      @include preview_pre_codeblock;
+      @include preview_tiptap_pre_codeblock;
     }
     a {
-      @include preview_a;
+      @include preview_tiptap_a;
     }
     blockquote {
-      @include preview_blockquote;
+      @include preview_tiptap_blockquote;
     }
     &:focus-visible {
       outline: unset;
       @include transition_default;
     }
     h1 {
-      @include preview_h1;
+      @include preview_tiptap_h1;
     }
     h2 {
-      @include preview_h2;
+      @include preview_tiptap_h2;
     }
     h3 {
-      @include preview_h3;
+      @include preview_tiptap_h3;
     }
     h4,
     h5,
     h6 {
-      @include preview_smaller_headings;
+      @include preview_tiptap_smaller_headings;
     }
     hr {
-      @include preview_hr;
+      @include preview_tiptap_hr;
     }
     ol {
-      @include preview_ol;
+      @include preview_tiptap_ol;
     }
     ul {
-      @include preview_ul;
+      @include preview_tiptap_ul;
     }
   }
 }
@@ -170,40 +170,40 @@
   }
 }
 .tiptap-content {
-  @include preview_first_child;
+  @include preview_tiptap_first_child;
   a {
-    @include preview_a;
+    @include preview_tiptap_a;
   }
   blockquote {
-    @include preview_blockquote;
+    @include preview_tiptap_blockquote;
   }
   h1 {
-    @include preview_h1;
+    @include preview_tiptap_h1;
   }
   h2 {
-    @include preview_h2;
+    @include preview_tiptap_h2;
   }
   h3 {
-    @include preview_h3;
+    @include preview_tiptap_h3;
   }
   h4,
   h5,
   h6 {
-    @include preview_smaller_headings;
+    @include preview_tiptap_smaller_headings;
   }
   hr {
-    @include preview_hr;
+    @include preview_tiptap_hr;
   }
   ol {
-    @include preview_ol;
+    @include preview_tiptap_ol;
   }
   p {
-    @include preview_p;
+    @include preview_tiptap_p;
   }
   pre {
-    @include preview_pre_codeblock;
+    @include preview_tiptap_pre_codeblock;
   }
   ul {
-    @include preview_ul;
+    @include preview_tiptap_ul;
   }
 }

data/app/pb_kits/playbook/pb_rich_text_editor/_trix_styles.scss

@@ -1,3 +1,5 @@
+@import "previewer_mixin";
+
 @charset "UTF-8";
 /*
 Trix 1.3.0
@@ -297,41 +299,31 @@ trix-editor .attachment__metadata {
   trix-editor .attachment__metadata .attachment__size {
     margin-left: 0.2em;
     white-space: nowrap; }
+  trix-editor blockquote {
+    @include preview_trix_blockquote; }
+  trix-editor [dir=rtl] blockquote,
+  trix-editor blockquote[dir=rtl] {
+    @include preview_trix_blockquote }
 @charset "UTF-8";
-.trix-content {
-  line-height: 1.5; }
-  .trix-content * {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0; }
+.trix-content * {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0; }
+  .trix-content#content-preview div {
+    @include preview_trix_div; }
   .trix-content h1 {
-    font-size: 1.2em;
-    line-height: 1.2; }
+    @include preview_trix_h1; }
   .trix-content blockquote {
-    border: 0 solid #ccc;
-    border-left-width: 0.3em;
-    margin-left: 0.3em;
-    padding-left: 0.6em; }
+    @include preview_trix_blockquote; }
   .trix-content [dir=rtl] blockquote,
   .trix-content blockquote[dir=rtl] {
-    border-width: 0;
-    border-right-width: 0.3em;
-    margin-right: 0.3em;
-    padding-right: 0.6em; }
+    @include preview_trix_blockquote; }
   .trix-content li {
-    margin-left: 1em; }
+    @include preview_trix_li; }
   .trix-content [dir=rtl] li {
-    margin-right: 1em; }
+    @include preview_trix_li; }
   .trix-content pre {
-    display: inline-block;
-    width: 100%;
-    vertical-align: top;
-    font-family: monospace;
-    font-size: 0.9em;
-    padding: 0.5em;
-    white-space: pre;
-    background-color: #eee;
-    overflow-x: auto; }
+    @include preview_trix_pre; }
   .trix-content img {
     max-width: 100%;
     height: auto; }

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.html.erb

@@ -1,7 +1,7 @@
 
 <%= pb_rails("rich_text_editor", props: { id: "content-preview-editor" }) %>
 <div id="card-obfuscation" style="display:none">
-  <%= pb_rails("card", props: { margin_top: "md" }) do %>
+  <%= pb_rails("card", props: { margin_top: "md", max_width: "md", padding: "sm" }) do %>
    <div id="content-preview" class="trix-content">
    </div>
   <% end %>
@@ -11,15 +11,25 @@
 <% end %>
 
 <script>
-  // Button event handler
-  const button = document.getElementById('preview-button');
-  button.addEventListener('click', function() {
-    const content = document.getElementById('content-preview-editor');
-    const previewArea = document.getElementById('content-preview');
-    const cardDiv = document.getElementById('card-obfuscation');
+  document.addEventListener('DOMContentLoaded', () => {
+    function handleButtonClick() {
+      const editorContainer = [...document.querySelectorAll('[data-react-props]')]
+        .find(element => element.getAttribute('data-react-props')?.includes('"id":"content-preview-editor"'))
 
-    previewArea.innerHTML = content.value;
-    cardDiv.classList.add('mt_md');
-    cardDiv.style.display = 'block';
-  });
+      const editorElement = editorContainer?.querySelector('trix-editor')
+      const inputId = editorElement?.getAttribute('input')
+      const inputElement = inputId && document.getElementById(inputId)
+      
+      const editorContent = inputElement?.value || '' 
+      const previewArea = document.getElementById('content-preview')
+      const cardDiv = document.getElementById('card-obfuscation')
+
+      if (previewArea && cardDiv) {
+        previewArea.innerHTML = editorContent 
+        cardDiv.style.display = 'block'
+      }
+    }
+
+    document.getElementById('preview-button')?.addEventListener('click', handleButtonClick)
+  })
 </script>

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.html.erb

@@ -8,7 +8,7 @@
 <br>
 
 <%= pb_rails("timestamp", props: {
-  timestamp: DateTime.now - 3.months,
+  timestamp: DateTime.now,
   variant: "elapsed",
   show_user: false
 }) %>
@@ -16,7 +16,7 @@
 <br>
 
 <%= pb_rails("timestamp", props: {
-  timestamp: DateTime.now - 320.days,
+  timestamp: DateTime.now,
   variant: "elapsed",
   show_user: false,
   hide_updated: true

data/app/pb_kits/playbook/pb_timestamp/timestamp.rb

@@ -27,18 +27,6 @@ module Playbook
                      values: %w[default elapsed updated],
                      default: "default"
 
-      # Variables to use with pb_time_ago method
-      SECS_FORTY_FIVE = 45
-      SECS_PER_MIN  = 60
-      SECS_PER_HOUR = 60 * SECS_PER_MIN # 3,600 seconds
-      SECS_PER_DAY  = 24 * SECS_PER_HOUR # 86,400 seconds
-      SECS_PER_WEEK = 7 * SECS_PER_DAY # 604,800 seconds
-      SECS_PER_26 = 26 * SECS_PER_DAY # 26 days = 2,246,400 seconds
-      SECS_PER_MONTH = 4 * SECS_PER_WEEK # 2,419,200 seconds
-      SECS_PER_YEAR = 12 * SECS_PER_MONTH # 29,030,400 seconds
-      SECS_PER_320 = 320 * SECS_PER_DAY # 320 days = 27,648,000 seconds
-      SECS_PER_CENT = 100 * SECS_PER_YEAR # 3,153,600,000 seconds
-
       def classname
         generate_classname("pb_timestamp_kit", variant_class, align)
       end
@@ -85,42 +73,10 @@ module Playbook
 
       def format_elapsed_string
         user_string = show_user ? " by #{text}" : ""
-        datetime_string = " #{pb_time_ago(pb_date_time.convert_to_timestamp)} ago"
-        datetime_string[1] = hide_updated ? datetime_string[1].upcase : datetime_string[1]
+        datetime_string = " #{time_ago_in_words(pb_date_time.convert_to_timestamp)} ago"
         updated_string = hide_updated ? "" : "Last updated"
-        "#{updated_string}#{user_string}#{datetime_string}"
-      end
 
-      def pb_time_ago(value)
-        time_ago = DateTime.now.to_i - value.to_i
-        case time_ago
-        when (0...SECS_FORTY_FIVE)
-          "a few seconds"
-        when (SECS_FORTY_FIVE...SECS_PER_MIN)
-          "a minute"
-        when (SECS_PER_MIN...SECS_PER_HOUR)
-          time = time_ago / SECS_PER_MIN
-          time == 1 ? "a minute" : "#{time_ago / SECS_PER_MIN} minutes"
-        when (SECS_PER_HOUR...SECS_PER_DAY)
-          time = time_ago / SECS_PER_HOUR
-          time == 1 ? "an hour" : "#{time_ago / SECS_PER_HOUR} hours"
-        when (SECS_PER_DAY...SECS_PER_WEEK)
-          time = time_ago / SECS_PER_DAY
-          time == 1 ? "a day" : "#{time_ago / SECS_PER_DAY} days"
-        when (SECS_PER_WEEK...SECS_PER_26)
-          time = time_ago / SECS_PER_WEEK
-          time == 1 ? "a week" : "#{time_ago / SECS_PER_WEEK} weeks"
-        when (SECS_PER_26...SECS_PER_MONTH)
-          "a month"
-        when (SECS_PER_MONTH...SECS_PER_320)
-          time = time_ago / SECS_PER_MONTH
-          time == 1 ? "a month" : "#{time_ago / SECS_PER_MONTH} months"
-        when (SECS_PER_320...SECS_PER_YEAR)
-          "a year"
-        when (SECS_PER_YEAR...SECS_PER_CENT)
-          time = time_ago / SECS_PER_YEAR
-          time == 1 ? "a year" : "#{time_ago / SECS_PER_YEAR} years"
-        end
+        "#{updated_string}#{user_string}#{datetime_string}"
       end
 
       def datetime_or_text