Add TikTok content element

entry_types/scrolled/app/helpers/pageflow_scrolled/packs_helper.rb

@@ -38,14 +38,13 @@ def scrolled_frontend_packs(entry, widget_scope:)
     def scrolled_editor_packs(entry)
       ['pageflow-scrolled-editor'] +
         Pageflow.config_for(entry).additional_editor_packs.paths(entry) +
+        Pageflow.config_for(entry).additional_frontend_packs.paths(entry) +
         scrolled_frontend_widget_type_packs(entry, :editor)
     end
 
     def scrolled_editor_stylesheet_packs(entry)
-      Pageflow
-        .config_for(entry)
-        .additional_editor_packs
-        .stylesheet_paths(entry)
+      Pageflow.config_for(entry).additional_editor_packs.stylesheet_paths(entry) +
+        Pageflow.config_for(entry).additional_frontend_packs.paths(entry)
     end
 
     private

entry_types/scrolled/config/locales/new/tiktok.de.yml

@@ -0,0 +1,12 @@
+de:
+  pageflow_scrolled:
+    editor:
+      content_elements:
+        tikTokEmbed:
+          attributes:
+            url:
+              label: TikTok-URL
+          description: Bettet Inhalte von TikTok ein
+          name: TikTok
+          tabs:
+            general: TikTok-Embed

entry_types/scrolled/config/locales/new/tiktok.en.yml

@@ -0,0 +1,12 @@
+en:
+  pageflow_scrolled:
+    editor:
+      content_elements:
+        tikTokEmbed:
+          attributes:
+            url:
+              label: TikTok URL
+          description: Embed content from TikTok
+          name: TikTok
+          tabs:
+            general: TikTok Embed

entry_types/scrolled/lib/generators/pageflow_scrolled/install/install_generator.rb

@@ -128,7 +128,7 @@ def frontend_pack
       def server_pack
         create_file 'app/javascript/packs/pageflow-scrolled-server.js', <<-JS
           import 'pageflow-scrolled/frontend-server';
-          import 'pageflow-scrolled/contentElements-frontend';
+          import 'pageflow-scrolled/contentElements-server';
           import 'pageflow-scrolled/widgets-server';
         JS
       end

entry_types/scrolled/lib/pageflow_scrolled/plugin.rb

@@ -14,6 +14,11 @@ def configure(config)
 
         c.revision_components.register(Storyline)
 
+        c.additional_frontend_packs.register(
+          'pageflow-scrolled/contentElements/tikTokEmbed-frontend',
+          content_element_type_names: ['tikTokEmbed']
+        )
+
         c.widget_types.register(ReactWidgetType.new(name: 'defaultNavigation',
                                                     role: 'header'),
                                 default: true)

entry_types/scrolled/package/.gitignore

@@ -1,4 +1,5 @@
 /node_modules
+/contentElements
 /editor.js
 /frontend
 /frontend-server.js

entry_types/scrolled/package/config/webpack.js

@@ -7,8 +7,18 @@ module.exports = {
       // supported by the browser.
       'video.js$': 'video.js/core.es.js'
     },
+    fallback: {
+      // Silently ignore minimatch trying to load Node built-in module.
+      'path': false
+    }
   },
   entry: {
+    'pageflow-scrolled/contentElements/tikTokEmbed-frontend': {
+      import: [
+        'pageflow-scrolled/contentElements/tikTokEmbed-frontend',
+        'pageflow-scrolled/contentElements/tikTokEmbed-frontend.css'
+      ]
+    },
     'pageflow-scrolled/widgets/defaultNavigation': {
       import: [
         'pageflow-scrolled/widgets/defaultNavigation',

entry_types/scrolled/package/contentElements-server.js

@@ -0,0 +1,2 @@
+import 'pageflow-scrolled/contentElements-frontend';
+import 'pageflow-scrolled/contentElements/tikTokEmbed-frontend';

entry_types/scrolled/package/package.json

@@ -22,6 +22,7 @@
     "react-measure": "^2.3.0",
     "react-player": "^1.15.2",
     "react-quick-pinch-zoom": "^4.8.0",
+    "react-tiny-oembed": "^1.1.0",
     "react-tooltip": "^3.11.1",
     "react_ujs": "^2.6.1",
     "reselect": "^4.0.0",

entry_types/scrolled/package/src/contentElements/editor.js

@@ -10,8 +10,9 @@ import './inlineBeforeAfter/editor';
 import './externalLinkList/editor';
 import './vrImage/editor';
 import './iframeEmbed/editor';
+import './imageGallery/editor'
 import './twitterEmbed/editor'
+import './tikTokEmbed/editor'
 import './question/editor'
 import './counter/editor'
 import './quote/editor'
-import './imageGallery/editor'

entry_types/scrolled/package/src/contentElements/tikTokEmbed/TikTokEmbed.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import Embed from 'react-tiny-oembed';
+
+import {
+  ContentElementBox,
+  ThirdPartyOptIn,
+  useContentElementEditorState,
+  ThirdPartyOptOutInfo,
+  useContentElementLifecycle,
+  useIsStaticPreview
+} from 'pageflow-scrolled/frontend';
+
+import styles from './TikTokEmbed.module.css';
+
+const tikTokProvider = {
+  provider_name: "TikTok",
+  provider_url: "http://www.tiktok.com/",
+  endpoints: [
+    {
+      schemes: [
+        "https://www.tiktok.com/*",
+        "https://www.tiktok.com/*/video/*"
+      ],
+      url: "https://www.tiktok.com/oembed"
+    }
+  ]
+};
+
+export function TikTokEmbed({configuration}) {
+  const {url} = configuration;
+  const {isEditable, isSelected} = useContentElementEditorState();
+  const {shouldLoad} = useContentElementLifecycle();
+  const isStaticPreview = useIsStaticPreview();
+
+  return (
+    <ContentElementBox>
+      <div style={{pointerEvents: isEditable && !isSelected ? 'none' : undefined}}>
+        <div className={styles.wrapper}>
+          {shouldLoad && url && !isStaticPreview &&
+           <ThirdPartyOptIn
+             providerName="tiktok">
+             <div className={styles.inner} data-percy="hide">
+               <Embed key={url}
+                      url={url}
+                      providers={[tikTokProvider]} />
+             </div>
+           </ThirdPartyOptIn>}
+        </div>
+        <ThirdPartyOptOutInfo inset providerName="tiktok" />
+      </div>
+    </ContentElementBox>
+  );
+}

entry_types/scrolled/package/src/contentElements/tikTokEmbed/TikTokEmbed.module.css

@@ -0,0 +1,17 @@
+.wrapper {
+  margin: 0 auto;
+  max-width: 325px;
+  min-height: 450px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.inner {
+  background-color: #fff;
+  visibility: hidden;
+}
+
+.inner:has(iframe) {
+  visibility: visible;
+}

entry_types/scrolled/package/src/contentElements/tikTokEmbed/editor.js

@@ -0,0 +1,25 @@
+import {editor} from 'pageflow-scrolled/editor';
+import {UrlInputView} from 'pageflow/ui';
+import pictogram from './pictogram.svg'
+
+editor.contentElementTypes.register('tikTokEmbed', {
+  pictogram,
+  category: 'media',
+  supportedPositions: ['inline', 'sticky', 'standAlone', 'left', 'right'],
+  supportedWidthRange: ['md', 'full'],
+
+  configurationEditor() {
+    this.tab('general', function() {
+      this.input('url', UrlInputView, {
+        supportedHosts: [
+          'https://www.tiktok.com'
+        ],
+        displayPropertyName: 'displayUrl',
+        required: true,
+        permitHttps: true
+      });
+      this.group('ContentElementPosition');
+    });
+  },
+  defaultConfig: {},
+});

entry_types/scrolled/package/src/contentElements/tikTokEmbed/frontend.js

@@ -0,0 +1,19 @@
+import {frontend} from 'pageflow-scrolled/frontend';
+import {TikTokEmbed} from './TikTokEmbed';
+
+frontend.contentElementTypes.register('tikTokEmbed', {
+  component: TikTokEmbed,
+  lifecycle: true,
+  customMargin: true,
+
+  consentVendors({t}) {
+    const prefix = 'pageflow_scrolled.public.tiktok';
+
+    return [{
+      name: 'tiktok',
+      displayName: t(`${prefix}.consent_vendor_name`),
+      description: t(`${prefix}.consent_vendor_description`),
+      paradigm: 'lazy opt-in'
+    }];
+  }
+});

entry_types/scrolled/package/src/contentElements/tikTokEmbed/stories.js

@@ -0,0 +1,10 @@
+import './frontend';
+import {storiesOfContentElement} from 'pageflow-scrolled/spec/support/stories';
+
+storiesOfContentElement(module, {
+  typeName: 'tikTokEmbed',
+  baseConfiguration: {
+    url: 'https://www.tiktok.com/@scout2015/video/6718335390845095173'
+  },
+  consent: true
+});

entry_types/scrolled/package/src/frontend/thirdPartyConsent/OptOutInfo.js

@@ -24,7 +24,8 @@ import InfoIcon from '../icons/information.svg'
  */
 export function OptOutInfo({
   providerName,
-  hide
+  hide,
+  inset
 }) {
   const {t} = useI18n();
   const theme = useTheme();
@@ -46,7 +47,7 @@ export function OptOutInfo({
 
   return (
     <div className={classNames(styles.optOut,
-                               {[styles.full]: width === widths.full})}
+                               {[styles.full]: width === widths.full || inset})}
          style={hide ? {opacity: 0, visibility: 'hidden'} : undefined}>
       <button className={styles.icon}>
         <InfoIcon/>

entry_types/scrolled/spec/helpers/pageflow_scrolled/packs_helper_spec.rb

@@ -304,6 +304,22 @@ module PageflowScrolled
         expect(result).not_to include('pageflow-scrolled/contentElements/extra-editor')
       end
 
+      it 'includes additional frontend packs in editor' do
+        pageflow_configure do |config|
+          config.for_entry_type(PageflowScrolled.entry_type) do |entry_type_config|
+            entry_type_config.additional_frontend_packs.register(
+              'pageflow-scrolled/contentElements/extra'
+            )
+          end
+        end
+
+        entry = create(:published_entry, type_name: 'scrolled')
+
+        result = helper.scrolled_editor_packs(entry)
+
+        expect(result).to include('pageflow-scrolled/contentElements/extra')
+      end
+
       it 'includes all react widget type packs in editor' do
         pageflow_configure do |config|
           config.widget_types.register(ReactWidgetType.new(name: 'customNavigation',
@@ -372,12 +388,20 @@ module PageflowScrolled
     end
 
     describe 'scrolled_editor_stylesheet_packs' do
-      it 'empty by default' do
+      it 'does not include editor packs without stylesheet option' do
+        pageflow_configure do |config|
+          config.for_entry_type(PageflowScrolled.entry_type) do |entry_type_config|
+            entry_type_config.additional_editor_packs.register(
+              'pageflow-scrolled/only-js'
+            )
+          end
+        end
+
         entry = create(:published_entry, type_name: 'scrolled')
 
         result = helper.scrolled_editor_stylesheet_packs(entry)
 
-        expect(result).to eq([])
+        expect(result).not_to include('pageflow-scrolled/only-js')
       end
 
       it 'includes additional editor packs in editor with stylesheet option' do
@@ -398,7 +422,23 @@ module PageflowScrolled
 
         result = helper.scrolled_editor_stylesheet_packs(entry)
 
-        expect(result).to eq(['pageflow-scrolled/extra-editor'])
+        expect(result).to include('pageflow-scrolled/extra-editor')
+      end
+
+      it 'includes additional frontend packs in editor' do
+        pageflow_configure do |config|
+          config.for_entry_type(PageflowScrolled.entry_type) do |entry_type_config|
+            entry_type_config.additional_frontend_packs.register(
+              'pageflow-scrolled/contentElements/extra'
+            )
+          end
+        end
+
+        entry = create(:published_entry, type_name: 'scrolled')
+
+        result = helper.scrolled_editor_stylesheet_packs(entry)
+
+        expect(result).to include('pageflow-scrolled/contentElements/extra')
       end
 
       it 'supports if and unless options for additional packs' do

pageflow.gemspec

@@ -130,7 +130,7 @@ Gem::Specification.new do |s|
   s.add_dependency 'http_accept_language', '~> 2.0'
 
   # Shared translations
-  s.add_dependency 'pageflow-public-i18n', '~> 1.24'
+  s.add_dependency 'pageflow-public-i18n', '~> 1.25'
 
   # Password encryption
   s.add_dependency 'bcrypt', '~> 3.1.7'

rollup.config.js

@@ -322,6 +322,19 @@ const pageflowScrolled = [
       plugins: plugins({extractCss: true}),
       ...ignoreJSXWarning
     }
+  ))),
+
+  ...(['tikTokEmbed'].map(name => (
+    {
+      input: `${pageflowScrolledPackageRoot}/src/contentElements/${name}/frontend.js`,
+      output: {
+        file: `${pageflowScrolledPackageRoot}/contentElements/${name}-frontend.js`,
+        format: 'esm',
+      },
+      external,
+      plugins: plugins({extractCss: true}),
+      ...ignoreJSXWarning
+    }
   )))
 ];