lexxy 0.1.23.beta → 0.1.25.beta

data/app/assets/stylesheets/lexxy-content.css

@@ -195,6 +195,42 @@
   .token.punctuation {
     color: var(--lexxy-color-code-token-punctuation);
   }
+
+  /* Tables */
+  :where(.lexxy-content__table-wrapper) {
+    margin-block: 1ch;
+    overflow-x: auto;
+  }
+
+  table {
+    border-collapse: collapse;
+    border-spacing: 0;
+    inline-size: calc(100% - 0.5ch);
+    margin: 0.25ch;
+
+    th,
+    td {
+      border: 1px solid var(--lexxy-color-ink-lighter);
+      padding: 1ch;
+      text-align: start;
+      word-break: normal;
+      
+      *:last-child {
+        margin-block-end: 0;
+      }
+
+      &.lexxy-content__table-cell--header {
+        background-color: var(--lexxy-color-ink-lightest);
+        font-weight: bold;
+      }
+
+      *:is(code, pre) {
+        hyphens: auto;
+        text-wrap: wrap;
+        white-space: pre-wrap;
+      }
+    }
+  }
 }
 
 :where([data-lexical-cursor]) {

data/app/assets/stylesheets/lexxy-editor.css

@@ -36,6 +36,7 @@
     cursor: pointer;
     font-size: inherit;
     inline-size: auto;
+    padding: 0;
 
     @media(any-hover: hover) {
       &:hover:not([aria-disabled="true"]) {
@@ -52,6 +53,23 @@
     }
   }
 
+  table {
+    .table-cell--selected {
+      background-color: var(--lexxy-color-table-cell-selected-bg) !important;
+    }
+
+    .lexxy-content__table-cell--selected {
+      background-color: var(--lexxy-color-table-cell-selected-bg) !important;
+      border-color: var(--lexxy-color-table-cell-selected-border) !important;
+    }
+  
+    &.lexxy-content__table--selection {
+      ::selection {
+        background: transparent;
+      }
+    }
+  }
+
   action-text-attachment {
     cursor: pointer;
   }
@@ -189,7 +207,7 @@
   user-select: none;
   -webkit-user-select: none;
 
-  .lexxy-editor__toolbar-dropdown-content {
+  :where(.lexxy-editor__toolbar-dropdown-content) {
     --dropdown-padding: 1ch;
     --dropdown-gap: calc(var(--dropdown-padding) / 2);
 
@@ -358,6 +376,212 @@
   }
 }
 
+/* Table dropdown
+/* -------------------------------------------------------------------------- */
+
+:where(lexxy-table-dropdown) {
+  display: flex;
+  flex-direction: column;
+  gap: 1ch;
+  
+  .lexxy-editor__table-create {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    gap: 0;
+
+    .lexxy-editor__table-buttons {
+      background-color: var(--lexxy-color-ink-lighter);
+      display: flex;
+      flex-direction: column;
+      gap: 1px;
+      padding: 1px;
+
+      div {
+        display: flex;
+        flex-direction: row;
+        gap: 1px;
+      }
+
+      button {
+        aspect-ratio: 1.5 / 1;
+        border: 0;
+        border-radius: 0;
+        color: var(--lexxy-color-ink);
+        font-family: var(--lexxy-font-base);
+        font-size: var(--lexxy-text-small);
+        font-weight: normal;
+        inline-size: 4ch;
+        margin: 0;
+
+        &.active {
+          background-color: var(--lexxy-color-ink-lightest);
+        }
+      }
+    }
+
+    label {
+      align-items: center;
+      display: flex;
+      gap: 0.5ch;
+      padding: 0.5ch 0;
+      margin-block-start: 1ch;
+    }
+
+    &:has(input[type="checkbox"]:checked) {
+      .lexxy-editor__table-buttons {
+        div:first-child button,
+        button:first-child {
+          filter: brightness(0.95);
+        }
+      }
+    }
+  }
+
+  .lexxy-editor__table-edit {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    gap: 0;
+
+    button {
+
+    }
+  }
+}
+
+/* Table handle buttons
+/* -------------------------------------------------------------------------- */
+
+:where(.lexxy-table-handle-buttons) {
+  --button-size: 2.5lh;
+  color: var(--lexxy-color-ink-inverted);
+  display: none;
+  flex-direction: row;
+  font-size: var(--lexxy-text-small);
+  gap: 0.25ch;
+  line-height: 1;
+  position: absolute;
+  transform: translate(-50%, -120%);
+  z-index: 10;
+
+  .lexxy-table-control {
+    align-items: center;
+    background-color: var(--lexxy-color-ink);
+    border-radius: 0.75ch;
+    display: flex;
+    flex-direction: row;
+    gap: 1ch;
+    padding: 2px;
+    white-space: nowrap;
+
+    button {
+      aspect-ratio: 1 / 1;
+      align-items: center;
+      background-color: transparent;
+      border-radius: var(--lexxy-radius);
+      border: 0;
+      color: var(--lexxy-color-ink-inverted);
+      cursor: pointer;
+      display: flex;
+      font-weight: bold;
+      justify-content: center;
+      line-height: 1;
+      min-block-size: var(--button-size);
+      min-inline-size: var(--button-size);
+      padding: 0;
+
+      &:hover,
+      &:focus-visible {
+        background-color: var(--lexxy-color-ink-medium);
+      }
+
+      svg {
+        block-size: 1em;
+        inline-size: 1em;
+        fill: currentColor;
+      }
+
+      span {
+        display: none;
+      }
+    }
+  }
+
+  .lexxy-table-control__more-menu {
+    gap: 0;
+    padding: 2px;
+    position: relative;
+    
+    summary {
+      aspect-ratio: 1 / 1;
+      align-items: center;
+      background: transparent;
+      border-radius: var(--lexxy-radius);
+      border: 0;
+      box-sizing: border-box;
+      display: flex;
+      font-size: inherit;
+      justify-content: center;
+      list-style: none;
+      min-block-size: var(--button-size);
+      min-inline-size: var(--button-size);
+      padding: 0;
+      user-select: none;
+      -webkit-user-select: none;
+
+      &::-webkit-details-marker {
+        display: none;
+      }
+
+      &:hover {
+        background: var(--lexxy-color-ink-medium);
+      }
+    }
+
+    .lexxy-table-control__more-menu-details {
+      display: flex;
+      flex-direction: column;
+      gap: 0.25ch;
+      inset-block-start: 105%;
+      inset-inline-start: 0;
+      padding: 0;
+      position: absolute;
+
+      .lexxy-table-control__more-menu-section {
+        background: var(--lexxy-color-ink);
+        border-radius: 0.75ch;
+        display: flex;
+        flex-direction: column;
+        padding: 2px;
+      }
+
+      button {
+        aspect-ratio: unset;
+        align-items: center;
+        display: flex;
+        flex-direction: row;
+        font-weight: normal;
+        gap: 1ch;
+        justify-content: flex-start;
+        padding: 0.5ch 2ch;
+        padding-inline-start: 1ch;
+        white-space: nowrap;
+
+        span {
+          display: inline-block;
+        }
+
+        svg {
+          block-size: 1.3lh;
+          inline-size: 1.3lh;
+          fill: currentColor;
+        }
+      }
+    }
+  }
+}
+
 
 /* Language picker
 /* -------------------------------------------------------------------------- */

data/app/assets/stylesheets/lexxy-variables.css

@@ -35,6 +35,7 @@
   --lexxy-color-selected-dark: var(--lexxy-color-blue);
   --lexxy-color-code-bg: var(--lexxy-color-ink-lightest);
 
+  /* Text color highlights */
   --highlight-1: rgb(136, 118, 38);
   --highlight-2: rgb(185, 94, 6);
   --highlight-3: rgb(207, 0, 0);
@@ -55,6 +56,13 @@
   --highlight-bg-8: rgba(221, 170, 123, 0.3);
   --highlight-bg-9: rgba(200, 200, 200, 0.3);
 
+  /* Tables */
+  --lexxy-color-table-header-bg: var(--lexxy-color-ink-lightest);
+  --lexxy-color-table-cell-border: var(--lexxy-color-ink-lighter);
+  --lexxy-color-table-cell-selected: var(--lexxy-color-selected);
+  --lexxy-color-table-cell-selected-border: highlight;
+  --lexxy-color-table-cell-selected-bg: highlight;
+
   /* Typography */
   --lexxy-font-base: system-ui, sans-serif;
   --lexxy-font-mono: ui-monospace, "Menlo", "Monaco", Consolas, monospace;

data/lib/lexxy/action_text_tag.rb

@@ -10,7 +10,7 @@ module Lexxy
       options = @options.stringify_keys
 
       add_default_name_and_id(options)
-      options["input"] ||= dom_id(object, [ options["id"], :trix_input ].compact.join("_")) if object
+      options["input"] ||= @template_object.dom_id(object, [ options["id"], :trix_input ].compact.join("_")) if object
       html_tag = @template_object.lexxy_rich_textarea_tag(options.delete("name"), options.fetch("value") { value }, options.except("value"), &@block)
       error_wrapping(html_tag)
     end

data/lib/lexxy/engine.rb

@@ -36,10 +36,12 @@ module Lexxy
     initializer "lexxy.sanitization" do |app|
       ActiveSupport.on_load(:action_text_content) do
         default_allowed_tags = Class.new.include(ActionText::ContentHelper).new.sanitizer_allowed_tags
-        ActionText::ContentHelper.allowed_tags = default_allowed_tags + %w[ video audio source embed ]
+        ActionText::ContentHelper.allowed_tags = default_allowed_tags + %w[ video audio source embed table tbody tr th td ]
 
         default_allowed_attributes = Class.new.include(ActionText::ContentHelper).new.sanitizer_allowed_attributes
         ActionText::ContentHelper.allowed_attributes = default_allowed_attributes + %w[ controls poster data-language style ]
+
+        Loofah::HTML5::SafeList::ALLOWED_CSS_FUNCTIONS << "var" # Allow CSS variables
       end
     end
 

data/lib/lexxy/rich_text_area_tag.rb

@@ -21,7 +21,7 @@ module Lexxy
     alias_method :lexxy_rich_text_area_tag, :lexxy_rich_textarea_tag
 
     private
-      # Tempoary: we need to *adaptarize* action text
+      # Temporary: we need to *adaptarize* action text
       def render_custom_attachments_in(value)
         if value.respond_to?(:body)
           if html = value.body_before_type_cast.presence

data/lib/lexxy/version.rb

@@ -1,3 +1,3 @@
 module Lexxy
-  VERSION = "0.1.23.beta"
+  VERSION = "0.1.25.beta"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: lexxy
 version: !ruby/object:Gem::Version
-  version: 0.1.23.beta
+  version: 0.1.25.beta
 platform: ruby
 authors:
 - Jorge Manrubia
@@ -120,6 +120,7 @@ files:
 - app/assets/javascript/lexxy.js
 - app/assets/javascript/lexxy.js.br
 - app/assets/javascript/lexxy.js.gz
+- app/assets/javascript/lexxy.js.map
 - app/assets/javascript/lexxy.min.js
 - app/assets/javascript/lexxy.min.js.br
 - app/assets/javascript/lexxy.min.js.gz
@@ -127,17 +128,8 @@ files:
 - app/assets/stylesheets/lexxy-editor.css
 - app/assets/stylesheets/lexxy-variables.css
 - app/assets/stylesheets/lexxy.css
-- app/controllers/actiontext/lexical/application_controller.rb
-- app/helpers/actiontext/lexical/application_helper.rb
-- app/jobs/actiontext/lexical/application_job.rb
-- app/models/actiontext/lexical/application_record.rb
 - app/views/action_text/attachables/_remote_video.html.erb
-- app/views/layouts/actiontext/lexical/application.html.erb
-- app/views/people/_person.html.erb
-- app/views/people/_prompt_item.html.erb
-- app/views/people/index.html.erb
 - config/ci.rb
-- config/routes.rb
 - lib/action_text/attachables/remote_video.rb
 - lib/active_storage/blob_with_preview_url.rb
 - lib/lexxy.rb

data/app/controllers/actiontext/lexical/application_controller.rb

@@ -1,6 +0,0 @@
-module Actiontext
-  module Lexical
-    class ApplicationController < ActionController::Base
-    end
-  end
-end

data/app/helpers/actiontext/lexical/application_helper.rb

@@ -1,6 +0,0 @@
-module Actiontext
-  module Lexical
-    module ApplicationHelper
-    end
-  end
-end

data/app/jobs/actiontext/lexical/application_job.rb

@@ -1,6 +0,0 @@
-module Actiontext
-  module Lexical
-    class ApplicationJob < ActiveJob::Base
-    end
-  end
-end

data/app/models/actiontext/lexical/application_record.rb

@@ -1,7 +0,0 @@
-module Actiontext
-  module Lexical
-    class ApplicationRecord < ActiveRecord::Base
-      self.abstract_class = true
-    end
-  end
-end

data/app/views/layouts/actiontext/lexical/application.html.erb

@@ -1,17 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <title>Actiontext lexical</title>
-  <%= csrf_meta_tags %>
-  <%= csp_meta_tag %>
-
-  <%= yield :head %>
-
-  <%= stylesheet_link_tag    "actiontext/lexical/application", media: "all" %>
-</head>
-<body>
-
-<%= yield %>
-
-</body>
-</html>

data/app/views/people/_person.html.erb

@@ -1 +0,0 @@
-<em><%= person.name %></em> (<strong><%= person.initials %></strong>)

data/app/views/people/_prompt_item.html.erb

@@ -1,6 +0,0 @@
-<lexxy-prompt-item search="<%= "#{person.name} #{person.initials}" %>" sgid="<%= person.attachable_sgid %>">
-  <template type="menu"><%= person.name %></template>
-  <template type="editor">
-    <%= render "people/person", person: person %>
-  </template>
-</lexxy-prompt-item>

data/app/views/people/index.html.erb

@@ -1,3 +0,0 @@
-<% @people.each do |person| %>
-  <%= render "people/prompt_item", person: person %>
-<% end %>

data/config/routes.rb

@@ -1,2 +0,0 @@
-Lexxy::Engine.routes.draw do
-end