Jacek Karczmarczyk jacekkarczmarczyk

## PageBreak.ts
import { mergeAttributes, Node } from '@tiptap/core';
import { TextSelection } from 'prosemirror-state';

export interface PageBreakRuleOptions {
  HTMLAttributes: Record<string, any>;
}

declare module '@tiptap/core' {
  interface Commands<ReturnType> {
    pageBreak: {

## mention.md

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                jacekkarczmarczyk
                / mention.md
            
            
              Last active
              November 14, 2022 13:07
            
              
                Input field looking like `filled` text field from Material Design with `Mention` plugin from `tiptap`
              
          
    [Loooong URL to Vue 3 playground](https://sfc.vuejs.org/#eNrtXAtz28bx/yoXNSrBRAAfkuyY1cOSLLUex3XHttLJ39I/AsEjiQgEEDz0iMrv3t/eAziAIPUYdaZTx21M4G5vd29vb2/v7gffrR3EsXOV87XB2k7GZ3HgZnzvLGRsZ+RfiQf5yNLsNuC7Z2uxOxr54WTAegmf/YUNXe9ykkR5OBqwP434+Gxt7/NtzNnZ2vrZ2gaLE56m7Pjvn48/7nSWcBxHYWan/u98wLrOK8F15iYTP7SHUZZFswHroxCMZVvGfo5yUNyykPMRyyKG2uiKs8APOdtkbjhi0JH5GXMnrh8Sxcy95FRwHSWXzEInb6XO7LfcTy7T/bZSq6aiFnhl+2PqehLFqRO4Qx6crek6L3DTFJV85GdRYnvoDA+zX36pkQ003Tjy8hR6//nPrNXYxrYVSUu33ru7gyEL2Ww+14oqVat8VmvWoNIXXcKUmJGfusOgUUnb1pWtjXqzKfcn06yxkaxabJLClQL+I41cUzNZbdPImm0X6ALBXROcG32UlIUVjJrCoU3d99mFfBqwb+/Mmnl8c8EGDD7Dx9BmpBl1ylFY5jBXbpLe7y9TvxybvZ/cxCcjpwO2k2ZJFE5KHyB2zsyNLR/zle3usYv1b+/oeb5+0XZ+jfzQam2wVlu4iWpcOrZ+2ukYsx2vqZf4ccZSnuUxC9xwAhUzqI1afxZHScbumBfN4jyDW8zZOIlmrIW40fqLQXAs+nQku1RQvc7A2Y07oLY3K/Tw8s9+/NmNC1qnU5Q5WUrEZyFMlGay82yX3VEvtA8O2NgNUi5cQ49bMUSiVMyYAWv9SL/Sh0qfG7AsyWXrKzfI8d6SJGTjAfvSGkcR2XLoJq1zVMyhj9SGzxBNdpmUdIyXdOeOdTqMp/DVTM8R4bhsnIee7blBYKex60E4SbD4FWwEgV6WBDYeedJqD9hV5I8gxKj3Q9gcSsTubRC56DGGFDwaab0pBg4

  
## useAsyncComputed.ts
// TODO debounce/throttle support

import { computed, ComputedRef, Ref, ref, watch } from '@vue/composition-api';

export function useAsyncComputed<R> (load: () => Promise<R>): {
  error: ComputedRef<unknown>;
  loading: ComputedRef<boolean>;
  value: ComputedRef<R | undefined>;
  forceRefresh: () => void;
};

## fakeComponents.ts
import Vue from 'vue'
import { PropValidator } from 'vue/types/options'

Vue.component('v-app', {
  props: {
    dark: Boolean,
    id: String,
    light: Boolean
  }
})

## fakeComponents.js
import Vue from 'vue'

// noinspection JSUnresolvedFunction
Vue.component('v-app', {
  props: {
    dark: Boolean,
    id: String,
    light: Boolean
  }
})

## VerticalTabs.vue
<template>
    <div :style="containerStyle" class="vertical-tabs" :class="{'vertical-tabs--vertical-text': verticalText, 'vertical-tabs--horizontal-text': !verticalText}">
        <v-tabs :value="value" @input="$emit('input', $event)" :show-arrows="verticalText" :color="color" :slider-color="sliderColor" :style="tabsStyle">
            <v-tab v-for="item in items" :key="item">{{ item }}</v-tab>
        </v-tabs>
    </div>
</template>

<script>
  export default {
	import { mergeAttributes, Node } from '@tiptap/core';
	import { TextSelection } from 'prosemirror-state';

	export interface PageBreakRuleOptions {
	HTMLAttributes: Record<string, any>;
	}

	declare module '@tiptap/core' {
	interface Commands<ReturnType> {
	pageBreak: {
	// TODO debounce/throttle support

	import { computed, ComputedRef, Ref, ref, watch } from '@vue/composition-api';

	export function useAsyncComputed<R> (load: () => Promise<R>): {
	error: ComputedRef<unknown>;
	loading: ComputedRef<boolean>;
	value: ComputedRef<R \| undefined>;
	forceRefresh: () => void;
	};
	import Vue from 'vue'
	import { PropValidator } from 'vue/types/options'

	Vue.component('v-app', {
	props: {
	dark: Boolean,
	id: String,
	light: Boolean
	}
	})
	import Vue from 'vue'

	// noinspection JSUnresolvedFunction
	Vue.component('v-app', {
	props: {
	dark: Boolean,
	id: String,
	light: Boolean
	}
	})
	<template>
	<div :style="containerStyle" class="vertical-tabs" :class="{'vertical-tabs--vertical-text': verticalText, 'vertical-tabs--horizontal-text': !verticalText}">
	<v-tabs :value="value" @input="$emit('input', $event)" :show-arrows="verticalText" :color="color" :slider-color="sliderColor" :style="tabsStyle">
	<v-tab v-for="item in items" :key="item">{{ item }}</v-tab>
	</v-tabs>
	</div>
	</template>

	<script>
	export default {