Scott.Idem/OSIT-AE-App-Svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Now able to save the HTML text from tip tap element.

Browse Source
This commit is contained in:
Scott Idem
2024-11-01 17:52:39 -04:00
parent 8ec01a1d64
commit 2d047f5a10
3 changed files with 104 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/lib/element_tiptap_editor.svelte
View File

@@ -81,7 +81,7 @@ if (show_button_kv) {
show_button_kv = show_button_kv_defaults; show_button_kv = show_button_kv_defaults;
} }
export let new_json = editor?.getJSON(); // export let new_json = editor?.getJSON();
export let new_html: string = ''; export let new_html: string = '';
onMount(() => { onMount(() => {
@@ -96,8 +96,22 @@ onMount(() => {
onTransaction: () => { onTransaction: () => {
// force re-render so `editor.isActive` works as expected // force re-render so `editor.isActive` works as expected
editor = editor; editor = editor;
new_html = editor.getHTML();
let updated_html = editor.getHTML();
if (updated_html == '<p></p>') {
new_html = '';
} else {
new_html = updated_html;
}
}, },
onUpdate: ({ editor }) => {
let updated_html = editor.getHTML();
if (updated_html == '<p></p>') {
new_html = '';
} else {
new_html = updated_html;
}
}
}); });
}); });
@@ -106,6 +120,13 @@ onDestroy(() => {
editor.destroy(); editor.destroy();
} }
}); });
function getContent() {
if (editor) {
return editor.getHTML();
}
return '';
}
</script> </script>
<!-- svelte-ignore a11y-no-static-element-interactions --> <!-- svelte-ignore a11y-no-static-element-interactions -->

17
src/routes/idaa/(idaa)/recovery_meetings/+page.svelte
View File

@@ -142,6 +142,23 @@ $: lq_new__event_obj_li = liveQuery(async () => {
lq__event_obj={lq__event_obj} lq__event_obj={lq__event_obj}
/> />
<svelte:fragment slot="footer">
<div class="text-center w-full">
<button
type="button"
on:click={() => {
console.log('Close modal');
$idaa_sess.recovery_meetings.show__modal_edit = false;
}}
class="btn btn-sm variant-soft-warning hover:variant-ghost-warning"
>
<span class="fas fa-times mx-1"></span>
Close
</button>
</div>
</svelte:fragment>
</Modal> </Modal>
<!-- Main modal --> <!-- Main modal -->

165
src/routes/idaa/(idaa)/recovery_meetings/ae_idaa_comp__event_obj_id_edit.svelte
View File

@@ -226,69 +226,19 @@ if ($ae_loc.lu_country_subdivision_list && $ae_loc.lu_country_subdivision_list.l
} }
onMount(() => { // onMount(() => {
console.log('** Component Mounted: ** Edit - Event Obj'); // console.log('** Component Mounted: ** Edit - Event Obj');
tinymce_remove(); // This seems to fix rendering issues // });
tinymce_init();
});
onDestroy(() => { // onDestroy(() => {
console.log('** Component Destroyed: ** Edit - Event Obj'); // console.log('** Component Destroyed: ** Edit - Event Obj');
tinymce_remove(); // This seems like the right thing to do // });
});
// afterUpdate(() => { // afterUpdate(() => {
// console.log('** Component Updated: ** Edit - Event Obj'); // console.log('** Component Updated: ** Edit - Event Obj');
// tinymce_init();
// }); // });
function tinymce_init() {
// REFERENCE: https://www.tiny.cloud/docs/tinymce/6/basic-setup/
// plugins: [
// 'advlist', 'autolink', 'link', 'image', 'lists', 'charmap', 'preview', 'anchor', 'pagebreak',
// 'searchreplace', 'wordcount', 'visualblocks', 'visualchars', 'code', 'fullscreen', 'insertdatetime',
// 'media', 'table', 'emoticons', 'template', 'help'
// ],
// 'undo redo | styles | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent'
// // NOTE: Basic version of the TinyMCE editor
// tinymce.init({
// selector: '.tinymce_editor.editor_basic',
// // width: 600,
// height: 400,
// plugins: [ 'lists', 'code', 'help' ],
// menubar: false,
// toolbar: 'undo redo | styles | bold italic | alignleft aligncenter | bullist numlist outdent indent | code | help',
// });
// // NOTE: Minimal version of the TinyMCE editor
// tinymce.init({
// selector: '.tinymce_editor.editor_basic_200',
// // width: 600,
// height: 200,
// plugins: [ 'lists', 'code', 'help' ],
// menubar: false,
// toolbar: 'undo redo | styles | bold italic | alignleft aligncenter | bullist numlist outdent indent | code | help',
// });
// // NOTE: Less is more version of the TinyMCE editor
// tinymce.init({
// selector: '.tinymce_editor.editor_less_100',
// // width: 600,
// height: 100,
// // plugins: [ 'lists', 'code', 'help' ],
// menubar: false,
// toolbar: false,
// statusbar: false,
// });
}
function tinymce_remove() {
// tinymce.remove('.tinymce_editor.editor_basic');
// tinymce.remove('.tinymce_editor.editor_basic_200');
// tinymce.remove('.tinymce_editor.editor_less_100');
}
$: if ($idaa_slct.event_obj) { $: if ($idaa_slct.event_obj) {
@@ -320,17 +270,15 @@ async function handle_submit_form(event: any) {
event_data['name'] = event_meeting_data.name; event_data['name'] = event_meeting_data.name;
if (event_meeting_data.description) { // Check if the description_new_html exists and is a string
event_data['description'] = event_meeting_data.description; if (typeof $idaa_slct.event_obj.description_new_html === 'string') {
console.log('New description is a string');
event_data['description'] = $idaa_slct.event_obj.description_new_html;
} else { } else {
event_data['description'] = null; console.log('New description is not a string. Do nothing.');
// event_data['description'] = event_meeting_data.description;
} }
// if (tinyMCE.get('description')) {
// event_data['description'] = tinyMCE.get('description').getContent();
// } else {
// event_data['description'] = event_meeting_data.description;
// }
event_data['type'] = event_meeting_data.type; event_data['type'] = event_meeting_data.type;
event_data['physical'] = !!event_meeting_data.physical; event_data['physical'] = !!event_meeting_data.physical;
event_data['virtual'] = !!event_meeting_data.virtual; event_data['virtual'] = !!event_meeting_data.virtual;
@@ -360,22 +308,24 @@ async function handle_submit_form(event: any) {
} }
// event_data['location_address_json'] = address; // event_data['location_address_json'] = address;
// if (tinyMCE.get('location_text')) { // Check if the location_text_new_html exists and is a string
// event_data['location_text'] = tinyMCE.get('location_text').getContent(); if (typeof $idaa_slct.event_obj.location_text_new_html === 'string') {
// } else { event_data['location_text'] = $idaa_slct.event_obj.location_text_new_html;
// event_data['location_text'] = event_meeting_data.location_text; } else {
// } console.log('New location text is not a string. Do nothing.');
}
event_data['attend_url'] = event_meeting_data.attend_url; event_data['attend_url'] = event_meeting_data.attend_url;
event_data['attend_url_passcode'] = event_meeting_data.attend_url_passcode; event_data['attend_url_passcode'] = event_meeting_data.attend_url_passcode;
event_data['attend_phone'] = event_meeting_data.attend_phone; event_data['attend_phone'] = event_meeting_data.attend_phone;
event_data['attend_phone_passcode'] = event_meeting_data.attend_phone_passcode; event_data['attend_phone_passcode'] = event_meeting_data.attend_phone_passcode;
// if (tinyMCE.get('attend_text')) { // Check if the attend_text_new_html exists and is a string
// event_data['attend_text'] = tinyMCE.get('attend_text').getContent(); if (typeof $idaa_slct.event_obj.attend_text_new_html === 'string') {
// } else { event_data['attend_text'] = $idaa_slct.event_obj.attend_text_new_html;
// event_data['attend_text'] = event_meeting_data.attend_text; } else {
// } console.log('New attend text is not a string. Do nothing.');
}
event_data['timezone'] = event_meeting_data.timezone; event_data['timezone'] = event_meeting_data.timezone;
@@ -405,11 +355,12 @@ async function handle_submit_form(event: any) {
event_data['recurring_end_time'] = event_meeting_data.recurring_end_time; event_data['recurring_end_time'] = event_meeting_data.recurring_end_time;
} }
// if (tinyMCE.get('recurring_text')) { // Check if the recurring_text_new_html exists and is a string
// event_data['recurring_text'] = tinyMCE.get('recurring_text').getContent(); if (typeof $idaa_slct.event_obj.recurring_text_new_html === 'string') {
// } else { event_data['recurring_text'] = $idaa_slct.event_obj.recurring_text_new_html;
// event_data['recurring_text'] = event_meeting_data.recurring_text; } else {
// } console.log('New recurring text is not a string. Do nothing.');
}
console.log(event_data['recurring_text']); console.log(event_data['recurring_text']);
if (!event_data['recurring_text'] || event_data['recurring_text'].includes('*gen*')) { if (!event_data['recurring_text'] || event_data['recurring_text'].includes('*gen*')) {
@@ -491,11 +442,12 @@ async function handle_submit_form(event: any) {
event_data['enable'] = !!event_meeting_data.enable; event_data['enable'] = !!event_meeting_data.enable;
} }
// if (tinyMCE.get('notes')) { // Check if the notes_new_html exists and is a string
// event_data['notes'] = tinyMCE.get('notes').getContent(); if (typeof $idaa_slct.event_obj.notes_new_html === 'string') {
// } else { event_data['notes'] = $idaa_slct.event_obj.notes_new_html;
// event_data['notes'] = event_meeting_data.notes; } else {
// } console.log('New notes is not a string. Do nothing.');
}
console.log(event_data); console.log(event_data);
@@ -665,6 +617,18 @@ async function handle_delete_event_obj({event_id, method='disable'}) {
{/if} {/if}
{/await} {/await}
<section class="text-center"> <!-- BEGIN: section event__options -->
{#if $idaa_slct.event_id}
<button
type="submit"
disabled={(disable_submit_btn)}
class="ae_btn btn_primary btn btn-primary variant-ghost-primary hover:variant-filled-primary transition"
>
<span class="fas fa-check m-1"></span> Save?
</button>
{/if}
</section> <!-- END: section event__options -->
<!-- <h3>Recovery Meeting</h3> --> <!-- <h3>Recovery Meeting</h3> -->
<input type="hidden" value={$idaa_slct.event_id} /> <input type="hidden" value={$idaa_slct.event_id} />
@@ -688,7 +652,7 @@ async function handle_delete_event_obj({event_id, method='disable'}) {
<!-- {@html $idaa_slct.event_obj?.description_new_html ?? 'not sure?'} --> <!-- {@html $idaa_slct.event_obj?.description_new_html ?? 'not sure?'} -->
<!-- If changed then show Save button --> <!-- If changed then show Save button -->
{#if <!-- {#if
$idaa_slct.event_obj.description_new_html && $idaa_slct.event_obj.description_new_html &&
$idaa_slct.event_obj?.description_new_html != '<p></p>' && $idaa_slct.event_obj?.description_new_html != '<p></p>' &&
$idaa_slct.event_obj.description != $idaa_slct.event_obj.description_new_html} $idaa_slct.event_obj.description != $idaa_slct.event_obj.description_new_html}
@@ -697,11 +661,10 @@ async function handle_delete_event_obj({event_id, method='disable'}) {
class="btn btn-md btn-primary variant-ghost-secondary" class="btn btn-md btn-primary variant-ghost-secondary"
on:click={() => $idaa_slct.event_obj.description = $idaa_slct.event_obj.description_new_html} on:click={() => $idaa_slct.event_obj.description = $idaa_slct.event_obj.description_new_html}
> >
<!-- <span class="icon">💾</span> -->
<span class="fas fa-save m-1"></span> <span class="fas fa-save m-1"></span>
Save? Save?
</button> </button>
{/if} {/if} -->
</label> </label>
@@ -843,7 +806,7 @@ async function handle_delete_event_obj({event_id, method='disable'}) {
/> />
<!-- If changed then show Save button --> <!-- If changed then show Save button -->
{#if <!-- {#if
$idaa_slct.event_obj?.location_text_new_html && $idaa_slct.event_obj?.location_text_new_html &&
$idaa_slct.event_obj?.location_text_new_html != '<p></p>' && $idaa_slct.event_obj?.location_text_new_html != '<p></p>' &&
$idaa_slct.event_obj.location_text != $idaa_slct.event_obj.location_text_new_html} $idaa_slct.event_obj.location_text != $idaa_slct.event_obj.location_text_new_html}
@@ -855,7 +818,7 @@ async function handle_delete_event_obj({event_id, method='disable'}) {
<span class="fas fa-save m-1"></span> <span class="fas fa-save m-1"></span>
Save? Save?
</button> </button>
{/if} {/if} -->
</label> </label>
<fieldset <fieldset
@@ -890,7 +853,7 @@ async function handle_delete_event_obj({event_id, method='disable'}) {
/> />
<!-- If changed then show Save button --> <!-- If changed then show Save button -->
{#if <!-- {#if
$idaa_slct.event_obj?.attend_text_new_html && $idaa_slct.event_obj?.attend_text_new_html &&
$idaa_slct.event_obj?.attend_text_new_html != '<p></p>' && $idaa_slct.event_obj?.attend_text_new_html != '<p></p>' &&
$idaa_slct.event_obj.attend_text != $idaa_slct.event_obj.attend_text_new_html} $idaa_slct.event_obj.attend_text != $idaa_slct.event_obj.attend_text_new_html}
@@ -902,7 +865,7 @@ async function handle_delete_event_obj({event_id, method='disable'}) {
<span class="fas fa-save m-1"></span> <span class="fas fa-save m-1"></span>
Save? Save?
</button> </button>
{/if} {/if} -->
</label> </label>
</section> <!-- END: section event__how_to_attend --> </section> <!-- END: section event__how_to_attend -->
@@ -985,7 +948,7 @@ async function handle_delete_event_obj({event_id, method='disable'}) {
<label>End Time <input name="recurring_end_time" type="time" value={$lq__event_obj?.recurring_end_time} max="8" class="input w-40" /></label> <label>End Time <input name="recurring_end_time" type="time" value={$lq__event_obj?.recurring_end_time} max="8" class="input w-40" /></label>
</fieldset> </fieldset>
{#if ( $ae_loc.administrator_access || $lq__event_obj && ($lq__event_obj?.show_recurring_text || ($lq__event_obj?.recurring_text && !$lq__event_obj?.recurring_text.includes('*gen*'))) )} {#if ( $ae_loc.administrator_access || $lq__event_obj && ($idaa_slct.event_obj?.show_recurring_text || ($lq__event_obj?.recurring_text && !$lq__event_obj?.recurring_text.includes('*gen*'))) )}
<p>Please only use the text box for additional information if the options above do not cover your needs. This may affect how this meeting shows up in search results.</p> <p>Please only use the text box for additional information if the options above do not cover your needs. This may affect how this meeting shows up in search results.</p>
<label for="recurring_text">Additional information on when and how often <label for="recurring_text">Additional information on when and how often
<!-- <textarea class="ae_value event__recurring_text tinymce_editor editor_less_100 textarea" id="recurring_text" name="recurring_text" placeholder="Additional information on when and how often" value={$lq__event_obj?.recurring_text ?? ''}></textarea> --> <!-- <textarea class="ae_value event__recurring_text tinymce_editor editor_less_100 textarea" id="recurring_text" name="recurring_text" placeholder="Additional information on when and how often" value={$lq__event_obj?.recurring_text ?? ''}></textarea> -->
@@ -997,7 +960,7 @@ async function handle_delete_event_obj({event_id, method='disable'}) {
/> />
<!-- If changed then show Save button --> <!-- If changed then show Save button -->
{#if <!-- {#if
$idaa_slct.event_obj?.recurring_text_new_html && $idaa_slct.event_obj?.recurring_text_new_html &&
$idaa_slct.event_obj?.recurring_text_new_html != '<p></p>' && $idaa_slct.event_obj?.recurring_text_new_html != '<p></p>' &&
$idaa_slct.event_obj.recurring_text != $idaa_slct.event_obj.recurring_text_new_html} $idaa_slct.event_obj.recurring_text != $idaa_slct.event_obj.recurring_text_new_html}
@@ -1009,18 +972,18 @@ async function handle_delete_event_obj({event_id, method='disable'}) {
<span class="fas fa-save m-1"></span> <span class="fas fa-save m-1"></span>
Save? Save?
</button> </button>
{/if} {/if} -->
</label> </label>
{/if} {/if}
{#if ( $ae_loc.administrator_access || $lq__event_obj && ($lq__event_obj?.show_recurring_text || ($lq__event_obj?.recurring_text && !$lq__event_obj?.recurring_text.includes('*gen*'))) )} {#if ( $ae_loc.administrator_access || $lq__event_obj && ($idaa_slct.event_obj?.show_recurring_text || ($lq__event_obj?.recurring_text && !$lq__event_obj?.recurring_text.includes('*gen*'))) )}
<button <button
type="button" type="button"
class="ae_btn ae_smaller btn btn-info btn-sm ae_width_md variant-ghost-warning hover:variant-filled-warning transition" class="ae_btn ae_smaller btn btn-info btn-sm ae_width_md variant-ghost-warning hover:variant-filled-warning transition"
style="" style=""
on:click|preventDefault={() => { on:click|preventDefault={() => {
if (confirm('Are you sure you want to remove the text for the additional details?')) { if (confirm('Are you sure you want to remove the text for the additional details?')) {
// tinyMCE.get('recurring_text').setContent(''); // $idaa_slct.event_obj.recurring_text = '';
$idaa_slct.event_obj.recurring_text = ''; $idaa_slct.event_obj.recurring_text_new_html = '';
$idaa_slct.event_obj.show_recurring_text = false; $idaa_slct.event_obj.show_recurring_text = false;
} else { } else {
return false; return false;
@@ -1037,9 +1000,9 @@ async function handle_delete_event_obj({event_id, method='disable'}) {
on:click|preventDefault={() => { on:click|preventDefault={() => {
// Remove *gen* prefix from recurring_text // Remove *gen* prefix from recurring_text
if ($lq__event_obj.recurring_text && $lq__event_obj.recurring_text.includes('*gen*')) { if ($lq__event_obj.recurring_text && $lq__event_obj.recurring_text.includes('*gen*')) {
$lq__event_obj.recurring_text = $lq__event_obj.recurring_text.replace('*gen* ', ''); $idaa_slct.event_obj.recurring_text = $lq__event_obj.recurring_text.replace('*gen* ', '');
} }
$lq__event_obj.show_recurring_text = true; $idaa_slct.event_obj.show_recurring_text = true;
}} }}
> >
<span class="fas fa-plus m-1"></span> Add More Details? <span class="fas fa-plus m-1"></span> Add More Details?
@@ -1272,7 +1235,7 @@ async function handle_delete_event_obj({event_id, method='disable'}) {
/> />
<!-- If changed then show Save button --> <!-- If changed then show Save button -->
{#if <!-- {#if
$idaa_slct.event_obj?.notes_new_html && $idaa_slct.event_obj?.notes_new_html &&
$idaa_slct.event_obj?.notes_new_html != '<p></p>' && $idaa_slct.event_obj?.notes_new_html != '<p></p>' &&
$idaa_slct.event_obj.notes != $idaa_slct.event_obj.notes_new_html} $idaa_slct.event_obj.notes != $idaa_slct.event_obj.notes_new_html}
@@ -1284,7 +1247,7 @@ async function handle_delete_event_obj({event_id, method='disable'}) {
<span class="fas fa-save m-1"></span> <span class="fas fa-save m-1"></span>
Save? Save?
</button> </button>
{/if} {/if} -->
<!-- {$idaa_slct.event_obj?.notes_new_html} --> <!-- {$idaa_slct.event_obj?.notes_new_html} -->
</label> </label>
{/if} {/if}