panda_cms 0.5.10 → 0.6.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (101) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +3 -1
  3. data/Rakefile +0 -1
  4. data/app/assets/builds/panda_cms.css +2432 -1
  5. data/app/assets/config/panda_cms_manifest.js +3 -0
  6. data/app/assets/stylesheets/panda_cms/application.tailwind.css +3 -27
  7. data/app/builders/panda_cms/form_builder.rb +1 -1
  8. data/app/components/panda_cms/admin/button_component.rb +6 -3
  9. data/app/components/panda_cms/admin/flash_message_component.rb +1 -1
  10. data/app/components/panda_cms/admin/tag_component.rb +1 -1
  11. data/app/components/panda_cms/code_component.rb +62 -0
  12. data/app/components/panda_cms/menu_component.html.erb +3 -0
  13. data/app/components/panda_cms/menu_component.rb +8 -1
  14. data/app/components/panda_cms/page_menu_component.html.erb +12 -8
  15. data/app/components/panda_cms/page_menu_component.rb +24 -13
  16. data/app/components/panda_cms/rich_text_component.html.erb +6 -38
  17. data/app/components/panda_cms/rich_text_component.rb +32 -7
  18. data/app/components/panda_cms/text_component.rb +25 -22
  19. data/app/controllers/panda_cms/admin/block_contents_controller.rb +1 -1
  20. data/app/controllers/panda_cms/admin/dashboard_controller.rb +14 -6
  21. data/app/controllers/panda_cms/admin/menus_controller.rb +1 -54
  22. data/app/controllers/panda_cms/admin/pages_controller.rb +2 -1
  23. data/app/controllers/panda_cms/admin/sessions_controller.rb +13 -6
  24. data/app/controllers/panda_cms/application_controller.rb +1 -1
  25. data/app/controllers/panda_cms/pages_controller.rb +1 -1
  26. data/app/controllers/panda_cms/posts_controller.rb +1 -1
  27. data/app/helpers/panda_cms/application_helper.rb +2 -2
  28. data/app/javascript/panda_cms/@editorjs--editorjs.js +2577 -0
  29. data/app/javascript/panda_cms/@hotwired--stimulus.js +4 -0
  30. data/app/javascript/panda_cms/@hotwired--turbo.js +160 -0
  31. data/app/javascript/panda_cms/@rails--actioncable--src.js +4 -0
  32. data/app/javascript/panda_cms/application_panda_cms.js +4 -0
  33. data/app/javascript/panda_cms/controllers/dashboard_controller.js +7 -0
  34. data/app/javascript/panda_cms/controllers/editor_controller.js +247 -0
  35. data/app/javascript/panda_cms/controllers/index.js +45 -0
  36. data/app/javascript/panda_cms/controllers/slug_controller.js +48 -0
  37. data/app/javascript/panda_cms/editor/plain_text_editor.js +102 -0
  38. data/app/javascript/panda_cms/editor/resource_loader.js +69 -0
  39. data/app/javascript/panda_cms/editor/rich_text_editor.js +89 -0
  40. data/app/javascript/panda_cms/tailwindcss-stimulus-components.js +4 -0
  41. data/app/lib/panda_cms/demo_site_generator.rb +1 -3
  42. data/app/lib/panda_cms/editor_js/blocks/alert.rb +32 -0
  43. data/app/lib/panda_cms/editor_js/blocks/base.rb +28 -0
  44. data/app/lib/panda_cms/editor_js/blocks/header.rb +13 -0
  45. data/app/lib/panda_cms/editor_js/blocks/image.rb +34 -0
  46. data/app/lib/panda_cms/editor_js/blocks/list.rb +30 -0
  47. data/app/lib/panda_cms/editor_js/blocks/paragraph.rb +13 -0
  48. data/app/lib/panda_cms/editor_js/blocks/quote.rb +27 -0
  49. data/app/lib/panda_cms/editor_js/blocks/table.rb +48 -0
  50. data/app/lib/panda_cms/editor_js/renderer.rb +120 -0
  51. data/app/lib/panda_cms/slug.rb +1 -1
  52. data/app/models/panda_cms/block.rb +2 -2
  53. data/app/models/panda_cms/block_content.rb +12 -2
  54. data/app/models/panda_cms/page.rb +9 -3
  55. data/app/models/panda_cms/post.rb +1 -1
  56. data/app/models/panda_cms/template.rb +4 -2
  57. data/app/models/panda_cms/user.rb +9 -1
  58. data/app/views/panda_cms/admin/dashboard/show.html.erb +11 -9
  59. data/app/views/panda_cms/admin/forms/new.html.erb +6 -7
  60. data/app/views/panda_cms/admin/menus/index.html.erb +0 -2
  61. data/app/views/panda_cms/admin/pages/edit.html.erb +22 -19
  62. data/app/views/panda_cms/admin/pages/new.html.erb +6 -7
  63. data/app/views/panda_cms/admin/posts/_form.html.erb +4 -4
  64. data/app/views/panda_cms/admin/sessions/new.html.erb +1 -2
  65. data/app/views/panda_cms/admin/shared/_sidebar.html.erb +12 -16
  66. data/app/views/panda_cms/shared/_header.html.erb +13 -14
  67. data/app/views/panda_cms/shared/_importmap.html.erb +32 -0
  68. data/config/importmap.rb +13 -10
  69. data/config/initializers/panda_cms.rb +57 -55
  70. data/config/routes.rb +9 -9
  71. data/config/tailwind.config.js +1 -0
  72. data/db/migrate/20240205223709_create_panda_cms_pages.rb +6 -4
  73. data/db/migrate/20240315125411_add_status_to_panda_cms_pages.rb +9 -0
  74. data/db/migrate/20241031205109_add_cached_content_to_panda_cms_block_contents.rb +5 -0
  75. data/db/seeds.rb +1 -0
  76. data/lib/generators/panda_cms/install_generator.rb +3 -0
  77. data/lib/panda_cms/engine.rb +42 -29
  78. data/lib/panda_cms/version.rb +1 -1
  79. data/lib/panda_cms.rb +58 -10
  80. data/lib/tasks/panda_cms.rake +41 -57
  81. data/public/panda-cms-assets/rich_text_editor.css +568 -0
  82. metadata +228 -304
  83. data/app/javascript/base.js +0 -37
  84. data/app/javascript/controllers/menu_controller.js +0 -19
  85. data/app/javascript/controllers/text_controller.js +0 -78
  86. data/app/javascript/controllers/text_field_update_controller.js +0 -51
  87. data/app/javascript/vendor/stimulus-components-rails-nested-form.js +0 -2
  88. data/app/javascript/vendor/tailwindcss-stimulus-components.js +0 -2
  89. data/app/views/panda_cms/admin/menus/_form.html.erb +0 -21
  90. data/app/views/panda_cms/admin/menus/_menu_item_fields.html.erb +0 -7
  91. data/app/views/panda_cms/admin/menus/edit.html.erb +0 -58
  92. data/app/views/panda_cms/admin/menus/new.html.erb +0 -5
  93. data/db/migrate/20240804110225_add_status_to_panda_cms_pages.rb +0 -7
  94. data/public/panda-cms-assets/javascripts/base.js +0 -37
  95. data/public/panda-cms-assets/javascripts/controllers/menu_controller.js +0 -19
  96. data/public/panda-cms-assets/javascripts/controllers/text_field_update_controller.js +0 -23
  97. data/public/panda-cms-assets/javascripts/embed/editable.js +0 -358
  98. data/public/panda-cms-assets/javascripts/embed/rich_text.css +0 -1294
  99. data/public/panda-cms-assets/javascripts/vendor/stimulus-components-rails-nested-form.js +0 -2
  100. data/public/panda-cms-assets/javascripts/vendor/stimulus-loading.js +0 -113
  101. data/public/panda-cms-assets/javascripts/vendor/tailwindcss-stimulus-components.js +0 -2
@@ -1,4 +1,10 @@
1
+ # desc "Explaining what the task does"
2
+ # task :panda_cms do
3
+ # # Task goes here
4
+ # end
5
+
1
6
  require "tailwindcss-rails"
7
+ require "tailwindcss/ruby"
2
8
  require "shellwords"
3
9
 
4
10
  require "panda_cms/engine"
@@ -6,6 +12,18 @@ require "panda_cms/engine"
6
12
  ENV["TAILWIND_PATH"] ||= Tailwindcss::Engine.root.join("exe/tailwindcss").to_s
7
13
 
8
14
  namespace :panda_cms do
15
+ desc "Watch admin assets for Panda CMS"
16
+ # We only care about this in development
17
+ task :watch_admin do
18
+ run_tailwind(
19
+ root_path: PandaCms::Engine.root,
20
+ input_path: "app/assets/stylesheets/panda_cms/application.tailwind.css",
21
+ output_path: "app/assets/builds/panda_cms.css",
22
+ watch: true,
23
+ minify: false
24
+ )
25
+ end
26
+
9
27
  desc "Generate missing blocks from template files"
10
28
  task generate_missing_blocks: [:environment] do
11
29
  PandaCms::Template.generate_missing_blocks
@@ -18,75 +36,41 @@ namespace :panda_cms do
18
36
  end
19
37
  end
20
38
 
21
- namespace :assets do
22
- desc "Compile assets for release"
23
- task :compile do
24
- # Copy all the JS files into public
25
- admin_js_path = PandaCms::Engine.root.join("app/javascript/panda_cms")
26
- FileUtils.cp_r "#{admin_js_path}/.", PandaCms::Engine.root.join("public/panda-cms-assets/javascripts")
27
- end
28
-
29
- desc "Build admin assets for Panda CMS"
30
- task :admin do
31
- # This is enough for development
32
- run_tailwind(
33
- root_path: PandaCms::Engine.root,
34
- input_path: "app/assets/stylesheets/panda_cms/application.tailwind.css",
35
- output_path: "app/assets/builds/panda_cms.css"
36
- )
37
- end
38
-
39
- desc "Build dummy assets for Panda CMS"
40
- # We only care about this in development
41
- task :dummy do
42
- run_tailwind(
43
- root_path: Rails.application.root,
44
- input_path: "app/assets/stylesheets/application.tailwind.css",
45
- output_path: "app/assets/builds/application.css",
46
- config_path: "config/tailwind.config.js"
47
- )
48
- end
49
-
50
- desc "Watch admin assets for Panda CMS"
51
- # We only care about this in development
52
- task :watch_admin do
53
- run_tailwind(
54
- root_path: PandaCms::Engine.root,
55
- input_path: "app/assets/stylesheets/panda_cms/application.tailwind.css",
56
- output_path: "app/assets/builds/panda_cms.css",
57
- watch: true
58
- )
59
- end
39
+ # namespace :assets do
40
+ # desc "Compile assets for release"
41
+ # task :compile do
42
+ # # Copy all the JS files into public
43
+ # admin_js_path = PandaCms::Engine.root.join("app/javascript/panda_cms")
44
+ # FileUtils.cp_r "#{admin_js_path}/.", PandaCms::Engine.root.join("public/panda-cms-assets/javascripts")
45
+ # end
60
46
 
61
- desc "Watch dummy assets for Panda CMS"
62
- # We only care about this in development
63
- task :watch_dummy do
64
- run_tailwind(
65
- root_path: Rails.application.root,
66
- input_path: "app/assets/stylesheets/application.tailwind.css",
67
- output_path: "app/assets/builds/application.css",
68
- config_path: "config/tailwind.config.js",
69
- watch: true
70
- )
71
- end
72
- end
47
+ # desc "Build admin assets for Panda CMS"
48
+ # task :admin do
49
+ # # This is enough for development
50
+ # run_tailwind(
51
+ # root_path: PandaCms::Engine.root,
52
+ # input_path: "app/assets/stylesheets/panda_cms/application.tailwind.css",
53
+ # output_path: "app/assets/builds/panda_cms.css"
54
+ # )
55
+ # end
56
+ # end
73
57
  end
74
58
 
75
59
  task default: [:spec, :panda_cms]
76
60
 
77
- def run_tailwind(root_path:, input_path: nil, output_path: nil, config_path: nil, watch: false)
78
- Rails.logger = Logger.new($stdout)
61
+ def run_tailwind(root_path:, input_path: nil, output_path: nil, config_path: nil, watch: false, minify: true)
79
62
  config_path ||= root_path.join("config/tailwind.config.js")
80
63
 
81
64
  command = [
82
- ENV["TAILWIND_PATH"],
65
+ Tailwindcss::Ruby.executable,
83
66
  "-i #{root_path.join(input_path)}",
84
67
  "-o #{root_path.join(output_path)}",
85
- "-c #{root_path.join(config_path)}",
86
- "-m"
68
+ "-c #{root_path.join(config_path)}"
87
69
  ]
88
70
 
89
71
  command << "-w" if watch
72
+ command << "-m" if minify
90
73
 
91
- exec command.join(" ")
74
+ command = command.join(" ")
75
+ system command
92
76
  end
@@ -0,0 +1,568 @@
1
+ trix-editor {
2
+ border: 1px solid #bbb;
3
+ border-radius: 3px;
4
+ margin: 0;
5
+ padding: 0.4em 0.6em;
6
+ min-height: 5em;
7
+ outline: none;
8
+ }
9
+
10
+ trix-toolbar * {
11
+ box-sizing: border-box;
12
+ }
13
+
14
+ trix-toolbar .trix-button-row {
15
+ display: flex;
16
+ flex-wrap: nowrap;
17
+ justify-content: space-between;
18
+ overflow-x: auto;
19
+ }
20
+
21
+ trix-toolbar .trix-button-group {
22
+ display: flex;
23
+ margin-bottom: 10px;
24
+ border: 1px solid #bbb;
25
+ border-top-color: #ccc;
26
+ border-bottom-color: #888;
27
+ border-radius: 3px;
28
+ }
29
+
30
+ trix-toolbar .trix-button-group:not(:first-child) {
31
+ margin-left: 1.5vw;
32
+ }
33
+
34
+ @media (max-width: 768px) {
35
+ trix-toolbar .trix-button-group:not(:first-child) {
36
+ margin-left: 0;
37
+ }
38
+ }
39
+
40
+ trix-toolbar .trix-button-group-spacer {
41
+ flex-grow: 1;
42
+ }
43
+
44
+ @media (max-width: 768px) {
45
+ trix-toolbar .trix-button-group-spacer {
46
+ display: none;
47
+ }
48
+ }
49
+
50
+ trix-toolbar .trix-button {
51
+ position: relative;
52
+ float: left;
53
+ color: rgba(0, 0, 0, 0.6);
54
+ font-size: 0.75em;
55
+ font-weight: 600;
56
+ white-space: nowrap;
57
+ padding: 0 0.5em;
58
+ margin: 0;
59
+ outline: none;
60
+ border: none;
61
+ border-bottom: 1px solid #ddd;
62
+ border-radius: 0;
63
+ background: transparent;
64
+ }
65
+
66
+ trix-toolbar .trix-button:not(:first-child) {
67
+ border-left: 1px solid #ccc;
68
+ }
69
+
70
+ trix-toolbar .trix-button.trix-active {
71
+ background: #cbeefa;
72
+ color: black;
73
+ }
74
+
75
+ trix-toolbar .trix-button:not(:disabled) {
76
+ cursor: pointer;
77
+ }
78
+
79
+ trix-toolbar .trix-button:disabled {
80
+ color: rgba(0, 0, 0, 0.125);
81
+ }
82
+
83
+ @media (max-width: 768px) {
84
+ trix-toolbar .trix-button {
85
+ letter-spacing: -0.01em;
86
+ padding: 0 0.3em;
87
+ }
88
+ }
89
+
90
+ trix-toolbar .trix-button--icon {
91
+ font-size: inherit;
92
+ width: 2.6em;
93
+ height: 1.6em;
94
+ max-width: calc(0.8em + 4vw);
95
+ text-indent: -9999px;
96
+ }
97
+
98
+ @media (max-width: 768px) {
99
+ trix-toolbar .trix-button--icon {
100
+ height: 2em;
101
+ max-width: calc(0.8em + 3.5vw);
102
+ }
103
+ }
104
+
105
+ trix-toolbar .trix-button--icon::before {
106
+ display: inline-block;
107
+ position: absolute;
108
+ top: 0;
109
+ right: 0;
110
+ bottom: 0;
111
+ left: 0;
112
+ opacity: 0.6;
113
+ content: "";
114
+ background-position: center;
115
+ background-repeat: no-repeat;
116
+ background-size: contain;
117
+ }
118
+
119
+ @media (max-width: 768px) {
120
+ trix-toolbar .trix-button--icon::before {
121
+ right: 6%;
122
+ left: 6%;
123
+ }
124
+ }
125
+
126
+ trix-toolbar .trix-button--icon.trix-active::before {
127
+ opacity: 1;
128
+ }
129
+
130
+ trix-toolbar .trix-button--icon:disabled::before {
131
+ opacity: 0.125;
132
+ }
133
+
134
+ trix-toolbar .trix-button--icon-attach::before {
135
+ background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M10.5%2018V7.5c0-2.25%203-2.25%203%200V18c0%204.125-6%204.125-6%200V7.5c0-6.375%209-6.375%209%200V18%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
136
+ top: 8%;
137
+ bottom: 4%;
138
+ }
139
+
140
+ trix-toolbar .trix-button--icon-bold::before {
141
+ background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%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%22M6.522%2019.242a.5.5%200%200%201-.5-.5V5.35a.5.5%200%200%201%20.5-.5h5.783c1.347%200%202.46.345%203.24.982.783.64%201.216%201.562%201.216%202.683%200%201.13-.587%202.129-1.476%202.71a.35.35%200%200%200%20.049.613c1.259.56%202.101%201.742%202.101%203.22%200%201.282-.483%202.334-1.363%203.063-.876.726-2.132%201.12-3.66%201.12h-5.89ZM9.27%207.347v3.362h1.97c.766%200%201.347-.17%201.733-.464.38-.291.587-.716.587-1.27%200-.53-.183-.928-.513-1.198-.334-.273-.838-.43-1.505-.43H9.27Zm0%205.606v3.791h2.389c.832%200%201.448-.177%201.853-.497.399-.315.614-.786.614-1.423%200-.62-.22-1.077-.63-1.385-.418-.313-1.053-.486-1.905-.486H9.27Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
142
+ }
143
+
144
+ trix-toolbar .trix-button--icon-italic::before {
145
+ background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%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%22M9%205h6.5v2h-2.23l-2.31%2010H13v2H6v-2h2.461l2.306-10H9V5Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
146
+ }
147
+
148
+ trix-toolbar .trix-button--icon-link::before {
149
+ background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%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%22M18.948%205.258a4.337%204.337%200%200%200-6.108%200L11.217%206.87a.993.993%200%200%200%200%201.41c.392.39%201.027.39%201.418%200l1.623-1.613a2.323%202.323%200%200%201%203.271%200%202.29%202.29%200%200%201%200%203.251l-2.393%202.38a3.021%203.021%200%200%201-4.255%200l-.05-.049a1.007%201.007%200%200%200-1.418%200%20.993.993%200%200%200%200%201.41l.05.049a5.036%205.036%200%200%200%207.091%200l2.394-2.38a4.275%204.275%200%200%200%200-6.072Zm-13.683%2013.6a4.337%204.337%200%200%200%206.108%200l1.262-1.255a.993.993%200%200%200%200-1.41%201.007%201.007%200%200%200-1.418%200L9.954%2017.45a2.323%202.323%200%200%201-3.27%200%202.29%202.29%200%200%201%200-3.251l2.344-2.331a2.579%202.579%200%200%201%203.631%200c.392.39%201.027.39%201.419%200a.993.993%200%200%200%200-1.41%204.593%204.593%200%200%200-6.468%200l-2.345%202.33a4.275%204.275%200%200%200%200%206.072Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
150
+ }
151
+
152
+ trix-toolbar .trix-button--icon-strike::before {
153
+ background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%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%22M6%2014.986c.088%202.647%202.246%204.258%205.635%204.258%203.496%200%205.713-1.728%205.713-4.463%200-.275-.02-.536-.062-.781h-3.461c.398.293.573.654.573%201.123%200%201.035-1.074%201.787-2.646%201.787-1.563%200-2.773-.762-2.91-1.924H6ZM6.432%2010h3.763c-.632-.314-.914-.715-.914-1.273%200-1.045.977-1.739%202.432-1.739%201.475%200%202.52.723%202.617%201.914h2.764c-.05-2.548-2.11-4.238-5.39-4.238-3.145%200-5.392%201.719-5.392%204.316%200%20.363.04.703.12%201.02ZM4%2011a1%201%200%201%200%200%202h15a1%201%200%201%200%200-2H4Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
154
+ }
155
+
156
+ trix-toolbar .trix-button--icon-quote::before {
157
+ background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M4.581%208.471c.44-.5%201.056-.834%201.758-.995C8.074%207.17%209.201%207.822%2010%208.752c1.354%201.578%201.33%203.555.394%205.277-.941%201.731-2.788%203.163-4.988%203.56a.622.622%200%200%201-.653-.317c-.113-.205-.121-.49.16-.764.294-.286.567-.566.791-.835.222-.266.413-.54.524-.815.113-.28.156-.597.026-.908-.128-.303-.39-.524-.72-.69a3.02%203.02%200%200%201-1.674-2.7c0-.905.283-1.59.72-2.088Zm9.419%200c.44-.5%201.055-.834%201.758-.995%201.734-.306%202.862.346%203.66%201.276%201.355%201.578%201.33%203.555.395%205.277-.941%201.731-2.789%203.163-4.988%203.56a.622.622%200%200%201-.653-.317c-.113-.205-.122-.49.16-.764.294-.286.567-.566.791-.835.222-.266.412-.54.523-.815.114-.28.157-.597.026-.908-.127-.303-.39-.524-.72-.69a3.02%203.02%200%200%201-1.672-2.701c0-.905.283-1.59.72-2.088Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
158
+ }
159
+
160
+ trix-toolbar .trix-button--icon-heading-1::before {
161
+ background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%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.5%207.5v-3h-12v3H14v13h3v-13h4.5ZM9%2013.5h3.5v-3h-10v3H6v7h3v-7Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
162
+ }
163
+
164
+ trix-toolbar .trix-button--icon-code::before {
165
+ background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%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%22M3.293%2011.293a1%201%200%200%200%200%201.414l4%204a1%201%200%201%200%201.414-1.414L5.414%2012l3.293-3.293a1%201%200%200%200-1.414-1.414l-4%204Zm13.414%205.414%204-4a1%201%200%200%200%200-1.414l-4-4a1%201%200%201%200-1.414%201.414L18.586%2012l-3.293%203.293a1%201%200%200%200%201.414%201.414Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
166
+ }
167
+
168
+ trix-toolbar .trix-button--icon-bullet-list::before {
169
+ background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%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%22M5%207.5a1.5%201.5%200%201%200%200-3%201.5%201.5%200%200%200%200%203ZM8%206a1%201%200%200%201%201-1h11a1%201%200%201%201%200%202H9a1%201%200%200%201-1-1Zm1%205a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm0%206a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm-2.5-5a1.5%201.5%200%201%201-3%200%201.5%201.5%200%200%201%203%200ZM5%2019.5a1.5%201.5%200%201%200%200-3%201.5%201.5%200%200%200%200%203Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
170
+ }
171
+
172
+ trix-toolbar .trix-button--icon-number-list::before {
173
+ background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%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%22M3%204h2v4H4V5H3V4Zm5%202a1%201%200%200%201%201-1h11a1%201%200%201%201%200%202H9a1%201%200%200%201-1-1Zm1%205a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm0%206a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm-3.5-7H6v1l-1.5%202H6v1H3v-1l1.667-2H3v-1h2.5ZM3%2017v-1h3v4H3v-1h2v-.5H4v-1h1V17H3Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
174
+ }
175
+
176
+ trix-toolbar .trix-button--icon-undo::before {
177
+ background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%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%22M3%2014a1%201%200%200%200%201%201h6a1%201%200%201%200%200-2H6.257c2.247-2.764%205.151-3.668%207.579-3.264%202.589.432%204.739%202.356%205.174%205.405a1%201%200%200%200%201.98-.283c-.564-3.95-3.415-6.526-6.825-7.095C11.084%207.25%207.63%208.377%205%2011.39V8a1%201%200%200%200-2%200v6Zm2-1Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
178
+ }
179
+
180
+ trix-toolbar .trix-button--icon-redo::before {
181
+ background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%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%2014a1%201%200%200%201-1%201h-6a1%201%200%201%201%200-2h3.743c-2.247-2.764-5.151-3.668-7.579-3.264-2.589.432-4.739%202.356-5.174%205.405a1%201%200%200%201-1.98-.283c.564-3.95%203.415-6.526%206.826-7.095%203.08-.513%206.534.614%209.164%203.626V8a1%201%200%201%201%202%200v6Zm-2-1Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
182
+ }
183
+
184
+ trix-toolbar .trix-button--icon-decrease-nesting-level::before {
185
+ background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%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%22M5%206a1%201%200%200%201%201-1h12a1%201%200%201%201%200%202H6a1%201%200%200%201-1-1Zm4%205a1%201%200%201%200%200%202h9a1%201%200%201%200%200-2H9Zm-3%206a1%201%200%201%200%200%202h12a1%201%200%201%200%200-2H6Zm-3.707-5.707a1%201%200%200%200%200%201.414l2%202a1%201%200%201%200%201.414-1.414L4.414%2012l1.293-1.293a1%201%200%200%200-1.414-1.414l-2%202Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
186
+ }
187
+
188
+ trix-toolbar .trix-button--icon-increase-nesting-level::before {
189
+ background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%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%22M5%206a1%201%200%200%201%201-1h12a1%201%200%201%201%200%202H6a1%201%200%200%201-1-1Zm4%205a1%201%200%201%200%200%202h9a1%201%200%201%200%200-2H9Zm-3%206a1%201%200%201%200%200%202h12a1%201%200%201%200%200-2H6Zm-2.293-2.293%202-2a1%201%200%200%200%200-1.414l-2-2a1%201%200%201%200-1.414%201.414L3.586%2012l-1.293%201.293a1%201%200%201%200%201.414%201.414Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
190
+ }
191
+
192
+ trix-toolbar .trix-dialogs {
193
+ position: relative;
194
+ }
195
+
196
+ trix-toolbar .trix-dialog {
197
+ position: absolute;
198
+ top: 0;
199
+ left: 0;
200
+ right: 0;
201
+ font-size: 0.75em;
202
+ padding: 15px 10px;
203
+ background: #fff;
204
+ box-shadow: 0 0.3em 1em #ccc;
205
+ border-top: 2px solid #888;
206
+ border-radius: 5px;
207
+ z-index: 5;
208
+ }
209
+
210
+ trix-toolbar .trix-input--dialog {
211
+ font-size: inherit;
212
+ font-weight: normal;
213
+ padding: 0.5em 0.8em;
214
+ margin: 0 10px 0 0;
215
+ border-radius: 3px;
216
+ border: 1px solid #bbb;
217
+ background-color: #fff;
218
+ box-shadow: none;
219
+ outline: none;
220
+ -webkit-appearance: none;
221
+ -moz-appearance: none;
222
+ }
223
+
224
+ trix-toolbar .trix-input--dialog.validate:invalid {
225
+ box-shadow: #F00 0px 0px 1.5px 1px;
226
+ }
227
+
228
+ trix-toolbar .trix-button--dialog {
229
+ font-size: inherit;
230
+ padding: 0.5em;
231
+ border-bottom: none;
232
+ }
233
+
234
+ trix-toolbar .trix-dialog--link {
235
+ max-width: 600px;
236
+ }
237
+
238
+ trix-toolbar .trix-dialog__link-fields {
239
+ display: flex;
240
+ align-items: baseline;
241
+ }
242
+
243
+ trix-toolbar .trix-dialog__link-fields .trix-input {
244
+ flex: 1;
245
+ }
246
+
247
+ trix-toolbar .trix-dialog__link-fields .trix-button-group {
248
+ flex: 0 0 content;
249
+ margin: 0;
250
+ }
251
+
252
+ trix-editor [data-trix-mutable]:not(.attachment__caption-editor) {
253
+ -webkit-user-select: none;
254
+ -moz-user-select: none;
255
+ -ms-user-select: none;
256
+ user-select: none;
257
+ }
258
+
259
+ trix-editor [data-trix-mutable]::-moz-selection,
260
+ trix-editor [data-trix-cursor-target]::-moz-selection,
261
+ trix-editor [data-trix-mutable] ::-moz-selection {
262
+ background: none;
263
+ }
264
+
265
+ trix-editor [data-trix-mutable]::selection,
266
+ trix-editor [data-trix-cursor-target]::selection,
267
+ trix-editor [data-trix-mutable] ::selection {
268
+ background: none;
269
+ }
270
+
271
+ trix-editor .attachment__caption-editor:focus[data-trix-mutable]::-moz-selection {
272
+ background: highlight;
273
+ }
274
+
275
+ trix-editor .attachment__caption-editor:focus[data-trix-mutable]::selection {
276
+ background: highlight;
277
+ }
278
+
279
+ trix-editor [data-trix-mutable].attachment.attachment--file {
280
+ box-shadow: 0 0 0 2px highlight;
281
+ border-color: transparent;
282
+ }
283
+
284
+ trix-editor [data-trix-mutable].attachment img {
285
+ box-shadow: 0 0 0 2px highlight;
286
+ }
287
+
288
+ trix-editor .attachment {
289
+ position: relative;
290
+ }
291
+
292
+ trix-editor .attachment:hover {
293
+ cursor: default;
294
+ }
295
+
296
+ trix-editor .attachment--preview .attachment__caption:hover {
297
+ cursor: text;
298
+ }
299
+
300
+ trix-editor .attachment__progress {
301
+ position: absolute;
302
+ z-index: 1;
303
+ height: 20px;
304
+ top: calc(50% - 10px);
305
+ left: 5%;
306
+ width: 90%;
307
+ opacity: 0.9;
308
+ transition: opacity 200ms ease-in;
309
+ }
310
+
311
+ trix-editor .attachment__progress[value="100"] {
312
+ opacity: 0;
313
+ }
314
+
315
+ trix-editor .attachment__caption-editor {
316
+ display: inline-block;
317
+ width: 100%;
318
+ margin: 0;
319
+ padding: 0;
320
+ font-size: inherit;
321
+ font-family: inherit;
322
+ line-height: inherit;
323
+ color: inherit;
324
+ text-align: center;
325
+ vertical-align: top;
326
+ border: none;
327
+ outline: none;
328
+ -webkit-appearance: none;
329
+ -moz-appearance: none;
330
+ }
331
+
332
+ trix-editor .attachment__toolbar {
333
+ position: absolute;
334
+ z-index: 1;
335
+ top: -0.9em;
336
+ left: 0;
337
+ width: 100%;
338
+ text-align: center;
339
+ }
340
+
341
+ trix-editor .trix-button-group {
342
+ display: inline-flex;
343
+ }
344
+
345
+ trix-editor .trix-button {
346
+ position: relative;
347
+ float: left;
348
+ color: #666;
349
+ white-space: nowrap;
350
+ font-size: 80%;
351
+ padding: 0 0.8em;
352
+ margin: 0;
353
+ outline: none;
354
+ border: none;
355
+ border-radius: 0;
356
+ background: transparent;
357
+ }
358
+
359
+ trix-editor .trix-button:not(:first-child) {
360
+ border-left: 1px solid #ccc;
361
+ }
362
+
363
+ trix-editor .trix-button.trix-active {
364
+ background: #cbeefa;
365
+ }
366
+
367
+ trix-editor .trix-button:not(:disabled) {
368
+ cursor: pointer;
369
+ }
370
+
371
+ trix-editor .trix-button--remove {
372
+ text-indent: -9999px;
373
+ display: inline-block;
374
+ padding: 0;
375
+ outline: none;
376
+ width: 1.8em;
377
+ height: 1.8em;
378
+ line-height: 1.8em;
379
+ border-radius: 50%;
380
+ background-color: #fff;
381
+ border: 2px solid highlight;
382
+ box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.25);
383
+ }
384
+
385
+ trix-editor .trix-button--remove::before {
386
+ display: inline-block;
387
+ position: absolute;
388
+ top: 0;
389
+ right: 0;
390
+ bottom: 0;
391
+ left: 0;
392
+ opacity: 0.7;
393
+ content: "";
394
+ background-image: url("data:image/svg+xml,%3Csvg%20height%3D%2224%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M19%206.41%2017.59%205%2012%2010.59%206.41%205%205%206.41%2010.59%2012%205%2017.59%206.41%2019%2012%2013.41%2017.59%2019%2019%2017.59%2013.41%2012z%22%2F%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E");
395
+ background-position: center;
396
+ background-repeat: no-repeat;
397
+ background-size: 90%;
398
+ }
399
+
400
+ trix-editor .trix-button--remove:hover {
401
+ border-color: #333;
402
+ }
403
+
404
+ trix-editor .trix-button--remove:hover::before {
405
+ opacity: 1;
406
+ }
407
+
408
+ trix-editor .attachment__metadata-container {
409
+ position: relative;
410
+ }
411
+
412
+ trix-editor .attachment__metadata {
413
+ position: absolute;
414
+ left: 50%;
415
+ top: 2em;
416
+ transform: translate(-50%, 0);
417
+ max-width: 90%;
418
+ padding: 0.1em 0.6em;
419
+ font-size: 0.8em;
420
+ color: #fff;
421
+ background-color: rgba(0, 0, 0, 0.7);
422
+ border-radius: 3px;
423
+ }
424
+
425
+ trix-editor .attachment__metadata .attachment__name {
426
+ display: inline-block;
427
+ max-width: 100%;
428
+ vertical-align: bottom;
429
+ overflow: hidden;
430
+ text-overflow: ellipsis;
431
+ white-space: nowrap;
432
+ }
433
+
434
+ trix-editor .attachment__metadata .attachment__size {
435
+ margin-left: 0.2em;
436
+ white-space: nowrap;
437
+ }
438
+
439
+ trix-editor {
440
+ margin-top: -0.5em !important;
441
+ border-style: dashed !important;
442
+ }
443
+
444
+ /* content styles */
445
+ .panda-cms-content {
446
+ line-height: 1.5;
447
+ overflow-wrap: break-word;
448
+ word-break: break-word;
449
+ }
450
+
451
+ .panda-cms-content * {
452
+ box-sizing: border-box;
453
+ margin: 0;
454
+ padding: 0;
455
+ }
456
+
457
+ .panda-cms-content h1 {
458
+ font-size: 1.2em;
459
+ line-height: 1.2;
460
+ }
461
+
462
+ .panda-cms-content h2 {
463
+ font-size: 1em;
464
+ font-weight: 300;
465
+ color: red !important;
466
+ }
467
+
468
+ .panda-cms-content blockquote {
469
+ border: 0 solid #ccc;
470
+ border-left-width: 0.3em;
471
+ margin-left: 0.3em;
472
+ padding-left: 0.6em;
473
+ }
474
+
475
+ .panda-cms-content [dir=rtl] blockquote,
476
+ .panda-cms-content blockquote[dir=rtl] {
477
+ border-width: 0;
478
+ border-right-width: 0.3em;
479
+ margin-right: 0.3em;
480
+ padding-right: 0.6em;
481
+ }
482
+
483
+ .panda-cms-content li {
484
+ margin-left: 1em;
485
+ }
486
+
487
+ .panda-cms-content [dir=rtl] li {
488
+ margin-right: 1em;
489
+ }
490
+
491
+ .panda-cms-content pre {
492
+ display: inline-block;
493
+ width: 100%;
494
+ vertical-align: top;
495
+ font-family: monospace;
496
+ font-size: 0.9em;
497
+ padding: 0.5em;
498
+ white-space: pre;
499
+ background-color: #eee;
500
+ overflow-x: auto;
501
+ }
502
+
503
+ .panda-cms-content img {
504
+ max-width: 100%;
505
+ height: auto;
506
+ }
507
+
508
+ .panda-cms-content .attachment {
509
+ display: inline-block;
510
+ position: relative;
511
+ max-width: 100%;
512
+ }
513
+
514
+ .panda-cms-content .attachment a {
515
+ color: inherit;
516
+ text-decoration: none;
517
+ }
518
+
519
+ .panda-cms-content .attachment a:hover,
520
+ .panda-cms-content .attachment a:visited:hover {
521
+ color: inherit;
522
+ }
523
+
524
+ .panda-cms-content .attachment__caption {
525
+ text-align: center;
526
+ }
527
+
528
+ .panda-cms-content .attachment__caption .attachment__name+.attachment__size::before {
529
+ content: ' \2022 ';
530
+ }
531
+
532
+ .panda-cms-content .attachment--preview {
533
+ width: 100%;
534
+ text-align: center;
535
+ }
536
+
537
+ .panda-cms-content .attachment--preview .attachment__caption {
538
+ color: #666;
539
+ font-size: 0.9em;
540
+ line-height: 1.2;
541
+ }
542
+
543
+ .panda-cms-content .attachment--file {
544
+ color: #333;
545
+ line-height: 1;
546
+ margin: 0 2px 2px 2px;
547
+ padding: 0.4em 1em;
548
+ border: 1px solid #bbb;
549
+ border-radius: 5px;
550
+ }
551
+
552
+ .panda-cms-content .attachment-gallery {
553
+ display: flex;
554
+ flex-wrap: wrap;
555
+ position: relative;
556
+ }
557
+
558
+ .panda-cms-content .attachment-gallery .attachment {
559
+ flex: 1 0 33%;
560
+ padding: 0 0.5em;
561
+ max-width: 33%;
562
+ }
563
+
564
+ .panda-cms-content .attachment-gallery.attachment-gallery--2 .attachment,
565
+ .panda-cms-content .attachment-gallery.attachment-gallery--4 .attachment {
566
+ flex-basis: 50%;
567
+ max-width: 50%;
568
+ }