{"version":3,"file":"EditableTextSlide.0b7d0175.js","sources":["../../../app/javascript/components/AutogrowingTextarea.vue","../../../app/javascript/components/TextEditor.vue","../../../app/javascript/components/EditableTextSlide.vue"],"sourcesContent":["<script lang=\"ts\">\n// FIXME: replace with useTextareaAutosize: https://vueuse.org/core/useTextareaAutosize/\n\nimport { defineComponent } from \"vue\";\n\n// This component looks overly complicated with both a local data value (`valueForEditable`), as\n// well as a computed property `localValue`.\n// But basically that’s the way to circumvent the cursor/caret from jumping back to the start of\n// the string whenever the upstream value gets changed by the component.\n// Known issues: behaves unexpectedly when receiving whitespace-/newline-only changes from upstream.\nexport default defineComponent({\n  props: {\n    value: {\n      type: String,\n      default: \"\",\n      required: true,\n    },\n    placeholder: {\n      type: String,\n      default: \"\",\n      required: false,\n    },\n    onFocus: {\n      type: Function,\n      default: () => {},\n      required: false,\n    },\n  },\n  emits: [\"input\", \"blur\"],\n  data(): {\n    hasFocus: boolean;\n    valueForEditable: string | null;\n    lastFocusOn?: HTMLElement;\n  } {\n    return {\n      hasFocus: false,\n      valueForEditable: \"\",\n      lastFocusOn: undefined,\n    };\n  },\n  computed: {\n    localValue: {\n      get() {\n        return this.value;\n      },\n      set(newValue) {\n        this.$emit(\"input\", newValue);\n      },\n    },\n    showPlaceholder() {\n      return this.placeholder.length > 0 && this.localValue.length === 0;\n    },\n  },\n  watch: {\n    localValue(newValue) {\n      if (!this.hasFocus) {\n        this.valueForEditable = newValue;\n      }\n    },\n  },\n  created() {\n    this.valueForEditable = this.value;\n  },\n  methods: {\n    update($event) {\n      this.localValue = $event.target.innerText;\n    },\n    focus($event) {\n      this.hasFocus = true;\n\n      // hack prevent iframe from stealing focus\n      this.lastFocusOn = $event.target;\n    },\n    blur() {\n      // hack prevent iframe from stealing focus (pt. 2)\n      setTimeout(() => {\n        if (document.activeElement?.tagName === \"IFRAME\") this.lastFocusOn?.focus();\n      }, 0);\n\n      this.hasFocus = false;\n      this.$emit(\"blur\", this.localValue);\n    },\n    sanitizePaste($event) {\n      const processor = document.createElement(\"DIV\");\n      processor.innerHTML = $event.clipboardData.getData(\"text\");\n      this.valueForEditable = processor.textContent;\n      if (this.valueForEditable) this.localValue = this.valueForEditable;\n    },\n  },\n});\n</script>\n\n<template>\n  <div\n    v-bind=\"$attrs\"\n    contenteditable=\"true\"\n    class=\"textarea\"\n    data-testid=\"autogrowing-textarea\"\n    :class=\"{ focus: hasFocus }\"\n    :placeholder=\"showPlaceholder ? placeholder : undefined\"\n    @input=\"update\"\n    @focus=\"focus\"\n    @blur=\"blur\"\n    @paste.prevent=\"sanitizePaste\"\n    v-text=\"valueForEditable\"\n  />\n</template>\n\n<style scoped>\n.textarea {\n  position: relative;\n  height: max-content;\n  white-space: pre-line;\n}\n\n.textarea[placeholder]::before {\n  content: attr(placeholder);\n  color: #8e8e8e;\n  pointer-events: none;\n}\n</style>\n","<script lang=\"ts\">\nimport { defineComponent } from \"vue\";\nimport { debounce } from \"lodash\";\nimport AutogrowingTextarea from \"./AutogrowingTextarea.vue\";\n\nexport default defineComponent({\n  components: {\n    AutogrowingTextarea,\n  },\n  props: {\n    text: {\n      type: String,\n      required: true,\n    },\n    placeholder: {\n      type: String,\n      required: true,\n    },\n  },\n  emits: [\"change\"],\n  data(): {\n    unsavedText: string | undefined;\n  } {\n    return {\n      unsavedText: undefined,\n    };\n  },\n  created() {\n    this.loadText();\n    this.save = debounce(this.save, 500);\n  },\n  beforeUnmount() {\n    this.save();\n  },\n  methods: {\n    loadText(): void {\n      this.unsavedText = this.text;\n    },\n    handleInput(text): void {\n      this.unsavedText = text;\n      this.save();\n    },\n    save(): void {\n      this.$emit(\"change\", this.unsavedText);\n    },\n  },\n});\n</script>\n\n<template>\n  <AutogrowingTextarea\n    :value=\"unsavedText\"\n    :placeholder=\"placeholder\"\n    @input=\"handleInput($event)\"\n    @blur=\"save\"\n  />\n</template>\n","<script>\nimport lodash from \"lodash\";\nimport TextEditor from \"@components/TextEditor.vue\";\n\nimport { Action, Overlay } from \"@models/ActionHierarchy\";\n\nexport default {\n  components: {\n    TextEditor,\n  },\n  props: {\n    action: {\n      type: Action,\n      required: true,\n    },\n  },\n  emits: [\"change\"],\n  data() {\n    return {\n      width: 1920,\n      height: 1080,\n      zoom: 1.0,\n    };\n  },\n  computed: {\n    // TODO: remove me, and include the action's text, template and type in the props\n    classes() {\n      return [this.action.type, \"default-template\"];\n    },\n    placeholder() {\n      if (this.action instanceof Overlay) return \"Add text to overlay…\";\n      return \"Add text to slide…\";\n    },\n  },\n  created() {\n    this.resize();\n    this.unthrottledResize = this.resize;\n    this.resize = lodash.throttle(this.unthrottledResize, 100);\n    window.addEventListener(\"resize\", this.resize);\n  },\n  beforeUnmount() {\n    window.removeEventListener(\"resize\", this.resize);\n  },\n  beforeMount() {\n    this.resize();\n  },\n  mounted() {\n    this.resize();\n  },\n  methods: {\n    horizontalZoom() {\n      if (this.$el) {\n        return this.$el.clientWidth / this.width;\n      }\n      return 0.25;\n    },\n    verticalZoom() {\n      if (this.$el) {\n        return this.$el.clientHeight / this.height;\n      }\n      return 0.25;\n    },\n\n    resize() {\n      this.zoom = Math.max(0.1, Math.min(this.horizontalZoom(), this.verticalZoom()));\n    },\n  },\n};\n</script>\n\n<template>\n  <div class=\"slide-editor\" v-bind=\"$attrs\">\n    <div\n      class=\"slide\"\n      :class=\"classes\"\n      :style=\"{\n        zoom: zoom,\n        width: `${width}px`,\n        height: `${height}px`,\n      }\"\n    >\n      <TextEditor\n        :text=\"action.text\"\n        :placeholder=\"placeholder\"\n        @change=\"$emit('change', $event)\"\n      />\n      <!-- <autogrowing-textarea\n        v-model=\"value.title\"\n        :placeholder=\"`Title…`\"\n        class=\"title-element text\"\n      />\n      <autogrowing-textarea\n        v-model=\"value.subTitle\"\n        :placeholder=\"`Sub Title…`\"\n        class=\"sub-title-element text\"\n      />\n      <autogrowing-textarea\n        v-model=\"value.body\"\n        :placeholder=\"`Enter the main text…`\"\n        class=\"body-element text\"\n      /> -->\n      <!-- <textarea\n        placeholder=\"Sub Title…\"\n        :value=\"subTitle\"\n        @input=\"$emit('input', $event.target.subTitle)\"\n      /> -->\n      <!-- <textarea\n        placeholder=\"Body…\"\n        :value=\"body\"\n        @input=\"$emit('input', $event.target.body)\"\n      /> -->\n    </div>\n  </div>\n</template>\n\n<style lang=\"scss\" scoped>\n.slide-editor {\n  position: relative;\n  height: 100%;\n  width: 100%;\n  // border: 1px solid red;\n  overflow: hidden;\n}\n\n.slide {\n  position: absolute;\n  top: 0;\n  left: 0;\n  display: flex;\n  flex-direction: column;\n  color: white;\n  background: transparent;\n  outline: none;\n  // border: 1px dashed blue;\n\n  text-shadow: none;\n  resize: none;\n\n  .textarea {\n    -webkit-font-smoothing: antialiased;\n  }\n\n  &.default-template {\n    .textarea {\n      // border: 2px solid red;\n      color: black;\n      padding: 30px 50px;\n      text-shadow: 2px 1px 2px rgba(white, 0.2);\n      background-color: rgba(\n        255,\n        255,\n        255,\n        0.95\n      ); // fallback for browsers that don't support background blurs.\n      box-shadow: 0 5px 100px rgba(black, 0.2);\n      border-radius: 20px;\n    }\n    &.TextSlide {\n      padding: 0;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      // background-color: rgba(black, 0.1); // darken the background\n\n      .textarea {\n        max-width: 68%;\n        color: black;\n        // font-size: 48px;\n        font-size: 72px;\n      }\n    }\n\n    &.Overlay {\n      .textarea {\n        // border: 2px solid blue;\n        background-color: rgba(255, 255, 255, 0.5);\n        position: absolute;\n        bottom: 50px;\n        left: 50px;\n        max-width: calc(100% - 100px);\n        line-height: 1.2em;\n        font-size: 72px;\n      }\n    }\n    @supports ((-webkit-backdrop-filter: blur(100px)) or (backdrop-filter: blur(100px))) {\n      // Multiple layers of elements with blurred backdrops appears to only work in Safari, and\n      // not in Chromium.\n      .textarea {\n        // background-color: rgba(255, 255, 255, 0.8);\n        backdrop-filter: blur(10px);\n      }\n\n      &.TextSlide {\n        // background-color: rgba(black, 0);\n        // backdrop-filter: blur(10px);\n      }\n    }\n  }\n\n  &.youtube-title {\n    // @import url(\"https://fonts.googleapis.com/css2?family=Raleway&display=swap\");\n\n    .textarea {\n      position: absolute;\n      bottom: 5%;\n      left: 0;\n      width: 100%;\n      padding: 0.25em 1em;\n      line-height: 1.2em;\n      font-size: 72px;\n      // font-family: \"Raleway\", sans-serif;\n      color: white;\n      text-shadow: 2px 1px 2px rgba(0, 0, 0, 0.2);\n\n      /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0.65+1,0+100 */\n      background: linear-gradient(\n        to right,\n        rgba(0, 0, 0, 0.65) 0%,\n        rgba(0, 0, 0, 0.65) 1%,\n        rgba(0, 0, 0, 0) 100%\n      );\n    }\n  }\n\n  &.bettyblocks-overlay {\n    // @import url(\"https://fonts.googleapis.com/css2?family=Ubuntu&display=swap\");\n\n    padding: 0;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    .textarea {\n      width: 60%;\n      background: white;\n      // font-family: \"Ubuntu\", sans-serif;\n      color: black;\n      font-size: 32px;\n      line-height: 1.4em;\n      border-radius: 1em;\n      padding: 1.25em 2em;\n      border: 0.1875em solid #385aff;\n    }\n  }\n}\n\n.textarea {\n  line-height: 1.2em;\n  outline: none;\n}\n// .title-element {\n//   font-size: 2em;\n// }\n// .sub-title-element {\n//   font-size: 1.5em;\n// }\n// .body-element {\n//   font-size: 1em;\n// }\n</style>\n"],"names":["_sfc_main","defineComponent","newValue","$event","_a","_b","processor","_createElementBlock","_mergeProps","_ctx","_cache","args","_toDisplayString","_hoisted_1","AutogrowingTextarea","debounce","text","_createBlock","_component_AutogrowingTextarea","TextEditor","Action","Overlay","lodash","_openBlock","_createElementVNode","_normalizeClass","$options","_normalizeStyle","$data","_createVNode","_component_TextEditor","$props"],"mappings":"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"}